import 'package:car_customer_app/view_models/appointments_view_model.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/extensions/string_extensions.dart'; import 'package:mc_common_app/models/widgets_models.dart'; import 'package:mc_common_app/theme/colors.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/dropdown/dropdow_field.dart'; import 'package:mc_common_app/widgets/extensions/extensions_widget.dart'; import 'package:mc_common_app/widgets/txt_field.dart'; import 'package:provider/provider.dart'; class BookAppointmentServicesView extends StatelessWidget { const BookAppointmentServicesView({Key? key}) : super(key: key); void openTheAddServiceBottomSheet(BuildContext context) { showModalBottomSheet( context: context, isScrollControlled: true, enableDrag: true, builder: (BuildContext context) { AppointmentsVM appointmentsVM = context.watch(); return SizedBox( height: MediaQuery.of(context).size.height * 0.85, child: Column( children: [ Container( margin: const EdgeInsets.all(8), height: 8, width: 60, decoration: const BoxDecoration(color: MyColors.lightTextColor, borderRadius: BorderRadius.all(Radius.circular(20))), ), 12.height, Row( mainAxisAlignment: MainAxisAlignment.start, children: [ "Select Category".toText(fontSize: 24, isBold: true), ], ), 30.height, Expanded( child: ListView( children: [ Builder( builder: (context) { List serviceCategories = []; for (var element in appointmentsVM.providerCategories) { if (!element.isSelected!) { serviceCategories.add(DropValue(element.id?.toInt() ?? 0, element.categoryName ?? "", "")); } } return DropdownField( (DropValue value) => appointmentsVM.updateProviderCategoryId(SelectionModel(selectedId: value.id, selectedOption: value.value, itemPrice: value.subValue)), list: serviceCategories, hint: "Select Category", dropdownValue: appointmentsVM.providerCategoryId.selectedId != -1 ? DropValue(appointmentsVM.providerCategoryId.selectedId, appointmentsVM.providerCategoryId.selectedOption, "") : null, ); }, ), if (appointmentsVM.isFetchingServices) ...[ Row( mainAxisAlignment: MainAxisAlignment.center, children: [const CircularProgressIndicator().paddingAll(10)], ), ] else if (appointmentsVM.providerServices.isNotEmpty) ...[ 8.height, Builder( builder: (context) { List serviceCategories = []; for (var element in appointmentsVM.providerServices) { if (!element.isSelected!) { serviceCategories.add(DropValue(element.id?.toInt() ?? 0, element.id.toString(), "")); } } return DropdownField( (DropValue value) => appointmentsVM.updateProviderServiceId(SelectionModel(selectedId: value.id, selectedOption: value.value, itemPrice: value.subValue)), list: serviceCategories, hint: "Select Services", dropdownValue: appointmentsVM.providerServiceId.selectedId != -1 ? DropValue(appointmentsVM.providerServiceId.selectedId, appointmentsVM.providerServiceId.selectedOption, "") : null, ); }, ), ], if (appointmentsVM.providerServiceId.selectedId != -1 && !appointmentsVM.isFetchingServices) ...[ 16.height, Row( children: [ "Select Service Location".toText( fontSize: 16, isBold: true, color: MyColors.black, ), ], ), 8.height, Row( children: [ Expanded( child: ShowFillButton( isFilled: appointmentsVM.isHomeTapped, maxHeight: 48, title: "Home", txtColor: appointmentsVM.isHomeTapped ? MyColors.white : MyColors.darkTextColor, onPressed: () => appointmentsVM.updateIsHomeTapped(true), ), ), 12.width, Expanded( child: ShowFillButton( isFilled: !appointmentsVM.isHomeTapped, txtColor: !appointmentsVM.isHomeTapped ? MyColors.white : MyColors.darkTextColor, maxHeight: 48, title: "Workshop", onPressed: () => appointmentsVM.updateIsHomeTapped(false), ), ), ], ), if (appointmentsVM.isHomeTapped) ...[ 8.height, TxtField( hint: 'Pick Home Location', value: appointmentsVM.pickedHomeLocation, isNeedClickAll: true, postfixData: Icons.location_on, postFixDataColor: MyColors.darkTextColor, onTap: () { //TODO: open the place picked to pick the location and save it in provider. appointmentsVM.updatePickedHomeLocation("PM58+F97, Al Olaya, Riyadh 12333"); }, ), 14.height, Row( crossAxisAlignment: CrossAxisAlignment.end, children: [ Icon( Icons.warning, color: MyColors.adPendingStatusColor, size: 19, ).paddingOnly(bottom: 2), 3.width, "Some services are not available on home location.".toText( color: MyColors.adPendingStatusColor, fontSize: 12, isItalic: true, ), ], ), ] ], ], ), ), SizedBox( width: double.infinity, child: Column( children: [ if (appointmentsVM.isHomeTapped && !appointmentsVM.isFetchingServices) ...[ const Divider(thickness: 1, height: 1), Row( crossAxisAlignment: CrossAxisAlignment.end, children: [ // TODO: This Price will be decided according to the service selected 150.toString().toText(fontSize: 30, isBold: true), "SAR".toText(fontSize: 15, isBold: true, color: MyColors.lightTextColor).paddingOnly(bottom: 5), ], ), "These charges are additional to the actual service charges. For heavy items the charges may vary.".toText(fontSize: 12, color: MyColors.lightTextColor), 22.height, ], SizedBox( width: double.infinity, child: ShowFillButton( maxHeight: 55, title: "Next", onPressed: () {}, ), ), ], ), ).paddingOnly(bottom: 20) ], )).horPaddingMain(); }, ); } @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( onTap: () => {openTheAddServiceBottomSheet(context)}, 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), ), ), // 20.height, // ListView.builder( // physics: const NeverScrollableScrollPhysics(), // shrinkWrap: true, // itemCount: adVM.specialServiceCards.length, // itemBuilder: (BuildContext context, int index) { // SpecialServiceCard specialServicesCard = adVM.specialServiceCards[index]; // return Column( // crossAxisAlignment: CrossAxisAlignment.start, // children: [ // Column( // children: [ // Row( // mainAxisAlignment: MainAxisAlignment.spaceBetween, // children: [ // Expanded( // child: specialServicesCard.serviceSelectedId!.selectedOption.toText(fontSize: 16, isBold: true), // ), // Align( // alignment: Alignment.topRight, // child: MyAssets.closeWithOrangeBg.buildSvg( // fit: BoxFit.fill, // height: 30, // width: 30, // ), // ).onPress(() => adVM.removeSpecialServiceCard(index)) // ], // ), // Builder(builder: (context) { // return Column( // crossAxisAlignment: CrossAxisAlignment.start, // children: [ // if (specialServicesCard.serviceSelectedId!.selectedId != 1 && specialServicesCard.serviceSelectedId!.selectedId != 3) ...[ // // Row( // // crossAxisAlignment: CrossAxisAlignment.start, // // children: [ // // "Duration: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true), // // (specialServicesCard.duration ?? "").toText(fontSize: 12, isBold: true).expand(), // // ], // // ), // 8.height, // Row( // crossAxisAlignment: CrossAxisAlignment.start, // children: [ // "Description: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true), // (specialServicesCard.description ?? "").toText(fontSize: 12, isBold: true).expand(), // ], // ), // ], // if (specialServicesCard.serviceSelectedId!.selectedId == 1 || specialServicesCard.serviceSelectedId!.selectedId == 3) ...[ // Row( // crossAxisAlignment: CrossAxisAlignment.start, // children: [ // const Icon( // weight: 2, // Icons.location_on_outlined, // color: MyColors.primaryColor, // size: 17, // ), // "${specialServicesCard.duration} km".toText(fontSize: 10, color: MyColors.primaryColor), // ], // ), // 8.height, // Row( // crossAxisAlignment: CrossAxisAlignment.start, // children: [ // "Branch Address: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true), // (specialServicesCard.address ?? "").toText(fontSize: 12, isBold: true).expand(), // ], // ), // Row( // crossAxisAlignment: CrossAxisAlignment.start, // children: [ // "Appointment Time: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true), // "${specialServicesCard.serviceDate} - ${specialServicesCard.serviceTime}".toText(fontSize: 12, isBold: true).expand(), // ], // ), // ], // 6.height, // Row( // crossAxisAlignment: CrossAxisAlignment.end, // children: [ // (specialServicesCard.serviceSelectedId!.itemPrice).toText(fontSize: 20, isBold: true), // 2.width, // "SAR".toText(color: MyColors.lightTextColor, fontSize: 14), // ], // ), // ], // ); // }), // 3.height, // const Divider(thickness: 1.5) // ], // ), // 10.height, // ], // ); // }, // ), ], ); }, ).horPaddingMain()); } }