import 'package:car_customer_app/view_models/appointments_view_model.dart'; import 'package:car_customer_app/views/appointments/widgets/appointment_service_pick_bottom_sheet.dart'; import 'package:flutter/material.dart'; import 'package:mc_common_app/classes/consts.dart'; import 'package:mc_common_app/config/routes.dart'; import 'package:mc_common_app/extensions/int_extensions.dart'; import 'package:mc_common_app/extensions/string_extensions.dart'; import 'package:mc_common_app/models/service_schedule_model.dart'; import 'package:mc_common_app/models/services/item_model.dart'; import 'package:mc_common_app/models/widgets_models.dart'; import 'package:mc_common_app/theme/colors.dart'; import 'package:mc_common_app/utils/navigator.dart'; import 'package:mc_common_app/views/advertisement/custom_add_button.dart'; import 'package:mc_common_app/widgets/button/show_fill_button.dart'; import 'package:mc_common_app/widgets/common_widgets/app_bar.dart'; import 'package:mc_common_app/widgets/common_widgets/info_bottom_sheet.dart'; import 'package:mc_common_app/widgets/common_widgets/time_slots.dart'; import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart'; import 'package:mc_common_app/widgets/extensions/extensions_widget.dart'; import 'package:provider/provider.dart'; class BookAppointmentServicesView extends StatelessWidget { BookAppointmentServicesView({Key? key}) : super(key: key); void openTheAddServiceBottomSheet(BuildContext context, AppointmentsVM appointmentsVM) { showModalBottomSheet( context: context, isScrollControlled: true, enableDrag: true, builder: (BuildContext context) { return AppointmentServicePickBottomSheet(); }, ); } final _dummySlots = [ TimeSlotModel(isSelected: false, slotId: 1, slot: "11:00"), TimeSlotModel(isSelected: false, slotId: 2, slot: "12:00"), TimeSlotModel(isSelected: true, slotId: 3, slot: "13:00"), TimeSlotModel(isSelected: false, slotId: 4, slot: "14:00"), TimeSlotModel(isSelected: false, slotId: 5, slot: "15:00"), TimeSlotModel(isSelected: false, slotId: 6, slot: "16:00"), TimeSlotModel(isSelected: false, slotId: 7, slot: "17:00"), TimeSlotModel(isSelected: false, slotId: 8, slot: "18:00"), TimeSlotModel(isSelected: false, slotId: 9, slot: "19:00"), TimeSlotModel(isSelected: false, slotId: 10, slot: "20:00"), TimeSlotModel(isSelected: false, slotId: 11, slot: "21:00"), TimeSlotModel(isSelected: false, slotId: 12, slot: "22:00"), TimeSlotModel(isSelected: false, slotId: 13, slot: "23:00"), TimeSlotModel(isSelected: false, slotId: 14, slot: "24:00"), TimeSlotModel(isSelected: false, slotId: 15, slot: "25:00"), TimeSlotModel(isSelected: false, slotId: 16, slot: "26:00"), TimeSlotModel(isSelected: false, slotId: 17, slot: "27:00"), TimeSlotModel(isSelected: false, slotId: 18, slot: "28:00"), TimeSlotModel(isSelected: false, slotId: 19, slot: "29:00"), ]; void priceBreakDownClicked(BuildContext context) { showModalBottomSheet( context: context, isScrollControlled: true, enableDrag: true, builder: (BuildContext context) { return InfoBottomSheet( title: "Charges Breakdown".toText(fontSize: 24, isBold: true), description: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ "Services".toText(fontSize: 16, isBold: true), Column( children: List.generate( 5, (index) => Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ "Gear Kit".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true), "200 SAR".toText(fontSize: 12, isBold: true), ], ), ), ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ "1149 SAR".toText(fontSize: 16, isBold: true), ], ), 20.height, "Home Location".toText(fontSize: 16, isBold: true), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ "10km ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true), "5 x 10".toText(fontSize: 12, isBold: true), ], ), 8.height, Row( mainAxisAlignment: MainAxisAlignment.end, children: [ "50 SAR".toText(fontSize: 16, isBold: true), ], ), 30.height, Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ "Total Amount ".toText(fontSize: 16, isBold: true), Row( crossAxisAlignment: CrossAxisAlignment.end, children: [ "120".toText(fontSize: 29, isBold: true), 2.width, "SAR".toText(color: MyColors.lightTextColor, fontSize: 16, isBold: true).paddingOnly(bottom: 5), ], ) ], ), 30.height, ], )); }); } String getTotalPrice(List serviceItems) { var totalPrice = 0.0; serviceItems.forEach((element) { totalPrice = totalPrice + double.parse(element.price ?? "0.0"); }); return totalPrice.toString(); } @override Widget build(BuildContext context) { return Scaffold( appBar: CustomAppBar( title: "Book Appointment", isRemoveBackButton: false, isDrawerEnabled: false, actions: [MyAssets.searchIcon.buildSvg().paddingOnly(right: 21)], onBackButtonTapped: () => Navigator.pop(context), ), body: Consumer( builder: (BuildContext context, AppointmentsVM appointmentsVM, Widget? child) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ 21.height, CustomAddButton( needsBorder: true, bgColor: MyColors.white, onTap: () => openTheAddServiceBottomSheet(context, appointmentsVM), text: "Add Services", icon: Container( height: 24, width: 24, decoration: const BoxDecoration(shape: BoxShape.circle, color: MyColors.darkTextColor), child: const Icon(Icons.add, color: MyColors.white), ), ).horPaddingMain(), 10.height, ListView.builder( shrinkWrap: true, itemCount: appointmentsVM.servicesInCurrentAppointment.length, itemBuilder: (BuildContext context, int scheduleIndex) { ServiceAppointmentScheduleModel scheduleData = appointmentsVM.serviceAppointmentScheduleList[scheduleIndex]; return Column( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ ListView.separated( physics: NeverScrollableScrollPhysics(), shrinkWrap: true, itemCount: appointmentsVM.servicesInSchedule.length, itemBuilder: (BuildContext context, int serviceIndex) { DropValue selectedService = appointmentsVM.servicesInSchedule[serviceIndex]; return Column( children: [ Row( children: [ Expanded( child: selectedService.value.toText(fontSize: 15, isBold: true), ), ], ), if (true) ...[ Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ "Service Location: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true), ("Home").toText(fontSize: 12, isBold: true).expand(), ], ), 5.height, Column( children: List.generate(scheduleData.serviceItemList!.length, (itemIndex) { ItemData itemData = scheduleData.serviceItemList![itemIndex]; return Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ "${itemData.name}: ".toText(fontSize: 13, color: MyColors.lightTextColor, isBold: true), ("${itemData.price}").toText(fontSize: 13, isBold: true).expand(), ], ); }), ), ], ], ); }, separatorBuilder: (BuildContext context, int index) => Divider(thickness: 2), ), 8.height, Row( crossAxisAlignment: CrossAxisAlignment.end, children: [ getTotalPrice(appointmentsVM.serviceAppointmentScheduleList[scheduleIndex].serviceItemList ?? []).toText(fontSize: 32, isBold: true), 2.width, "SAR".toText(color: MyColors.lightTextColor, fontSize: 16, isBold: true).paddingOnly(bottom: 5), Icon( Icons.arrow_drop_down, size: 30, ) ], ).onPress(() => priceBreakDownClicked(context)), ], ), ], ).toWhiteContainer(width: double.infinity, allPading: 12, margin: const EdgeInsets.symmetric(horizontal: 21, vertical: 10)); }, ).expand(), Row( children: [ Expanded( child: ShowFillButton( txtColor: MyColors.black, maxHeight: 55, title: "Cancel", onPressed: () {}, backgroundColor: MyColors.greyButtonColor, ), ), 12.width, Expanded( child: ShowFillButton( maxHeight: 55, title: "Review", onPressed: () { appointmentsVM.onReviewButtonPressed(context); }, backgroundColor: MyColors.darkPrimaryColor, ), ) ], ).paddingAll(21) ], ); }, )); } }