DiscoverModule/lib/ui_screen/interactionform/interaction_screen.dart

import 'dart:convert';
import 'dart:io';

import 'package:discover_module/constants.dart';
import 'package:discover_module/ui_screen/add_event/add_hcp.dart';
import 'package:discover_module/ui_screen/interactionform/interactionprovider.dart';
import 'package:discover_module/ui_screen/interactionform/model/interaction_data.dart';
import 'package:discover_module/ui_screen/interactionform/util.dart';
import 'package:discover_module/ui_screen/interactionform/widget/custombutton.dart';
import 'package:discover_module/ui_screen/interactionform/widget/customrangeslider.dart';
import 'package:discover_module/ui_screen/interactionform/widget/interatciontextfield.dart';
import 'package:discover_module/ui_screen/interactionform/widget/responsive_ext.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:intl/intl.dart';
import 'package:path_provider/path_provider.dart';
import 'package:provider/provider.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

import 'package:file_picker/file_picker.dart';
// import 'package:pwa_ios/widgets/responsive_ext.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:path/path.dart' as p;

class InteractionScreen extends StatefulWidget {
  int index;
  String form;
  InteractionScreen({super.key, required this.index, required this.form});

  @override
  State<InteractionScreen> createState() => _InteractionScreenState();
}

class _InteractionScreenState extends State<InteractionScreen> {
  List<dynamic> interactionReponseList = [];
  List<SectionList> sectionList = [];
  List<TextEditingController> textEditingControllerList = [];
  int textfieldIndex = 0;
  String dropdownvalue = 'Select value';
  String? fileName;
  final TextEditingController textEditingController = TextEditingController();
  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      // if (mytimer!.isActive) {
      //   cancelTimer();
      // }
      init();
    });

    super.initState();
  }

  init() async {
    await Provider.of<InteractionProvider>(context, listen: false)
        .init(widget.index);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<InteractionProvider>(
        builder: (BuildContext context, provider, Widget? child) {
      return GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: OrientationBuilder(builder: (context, orientation) {
          return Scaffold(
              //resizeToAvoidBottomInset: false,
              appBar: AppBar(
                title: const FittedBox(
                  fit: BoxFit.scaleDown,
                  child: Text(
                    'Record New Interaction',
                    style: TextStyle(
                        // fontSize: isTablet ? 22 : 14, color: Colors.white
                        //  fontSize: 20,
                        color: Colors.white),
                  ),
                ),
                // backgroundColor: const Color(0xFF2b9af3),
                automaticallyImplyLeading: false,
                actions: [saveActions(provider)],
                leading: InkWell(
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: const Icon(
                    Icons.arrow_back_ios,
                    color: Colors.white,
                  ),
                ),
              ),
              body: Column(
                children: [
                  Expanded(
                    child: ListView.builder(
                      itemCount: provider.interactionReponseList.length,
                      padding: EdgeInsets.zero,
                      cacheExtent: double.parse(
                          provider.interactionReponseList.length.toString()),
                      itemBuilder: (context, index) {
                        var item = provider.interactionReponseList[index];
                        sectionList = item.sectionList;
                        return ExpansionTile(
                            maintainState: true,
                            // backgroundColor: Colors.white,
                            // collapsedBackgroundColor: Color(0xFF2b9af3),
                            initiallyExpanded: true,
                            title: Stack(
                                alignment: AlignmentDirectional.center,
                                children: [
                                  Container(
                                      // height: double.infinity,
                                      width: double.infinity,
                                      padding: const EdgeInsets.all(8.0),
                                      decoration: BoxDecoration(
                                        // color: Color(0xFF2b9af3),
                                        color: Constants.k2color,
                                      ),
                                      child: Text(
                                        item.sectionName,
                                        style: const TextStyle(
                                          color: Colors.white,
                                          fontWeight: FontWeight.bold,
                                          //  fontSize: isTablet ? 18 : 14
                                        ),
                                      )),
                                  item.multiple
                                      ? Align(
                                          alignment: Alignment.centerRight,
                                          child: IconButton(
                                            onPressed: () {
                                              if (item.sectionName == "HCP") {
                                                Navigator.push(
                                                    context,
                                                    MaterialPageRoute(
                                                        builder: (context) =>
                                                            Addhcp()));

                                                provider.getSectionItem(
                                                    item.sectionName);
                                                // print("index is $listIndex");
                                                setState(() {
                                                  // for (var item
                                                });
                                              } else {
                                                provider.getSectionItem(
                                                    item.sectionName);
                                                // print("index is $listIndex");
                                                setState(() {
                                                  // for (var item
                                                });
                                              }
                                            },
                                            icon: const Icon(
                                              Icons.add_circle_outline,
                                              size: 30,
                                              color: Colors.white,
                                            ),
                                          ),
                                        )
                                      : const SizedBox.shrink()
                                ]),
                            children: [
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    // const SizedBox(
                                    //   height: 20,
                                    // ),

                                    Padding(
                                      padding: isTablet
                                          ? const EdgeInsets.only(left: 14.0)
                                          : const EdgeInsets.only(
                                              left: 12.0, right: 12.0),
                                      child: GridView.count(
                                        physics:
                                            const NeverScrollableScrollPhysics(),
                                        crossAxisCount: context.responsive<int>(
                                          1,
                                          sm: 1, // small
                                          md: 2, // medium
                                          lg: sectionList.length == 1
                                              ? 1
                                              : 3, // large
                                          xl: 3, // extra large screen
                                        ),
                                        // crossAxisCount:
                                        //     orientation == Orientation.portrait
                                        //         ? 1
                                        //         : 3,
                                        // crossAxisCount: (MediaQuery.of(context)
                                        //             .orientation ==
                                        //         Orientation.landscape)
                                        //     ? 3
                                        //     : 1,

                                        mainAxisSpacing:
                                            sectionList.length == 1 || !isTablet
                                                ? 1
                                                : 3.5,
                                        // mainAxisSpacing:
                                        //     orientation == Orientation.portrait
                                        //         ? 1
                                        //         : 3,
                                        shrinkWrap: true,
                                        padding: EdgeInsets.zero,
                                        // childAspectRatio: MediaQuery.of(context)
                                        //         .size
                                        //         .aspectRatio *
                                        //     0.10,
                                        // childAspectRatio:
                                        //     sectionList.length == 1
                                        //         ? orientation ==
                                        //                 Orientation.landscape
                                        //             ? 10
                                        //             : 3.8
                                        //         : 2.4,
                                        // childAspectRatio:
                                        //     sectionList.length == 1
                                        //         ? orientation ==
                                        //                 Orientation.landscape
                                        //             ? 10
                                        //             : 3.8
                                        //         : isTablet
                                        //             ? 2.8
                                        //             : 3.8,

                                        childAspectRatio:
                                            sectionList.length == 1
                                                ? orientation ==
                                                        Orientation.landscape
                                                    ? 10
                                                    : 4.8
                                                : isTablet
                                                    ? 2.8
                                                    : 3.0,
                                        // /:2.4,
                                        // childAspectRatio: 3.8,

                                        children: List.generate(
                                          sectionList.length,
                                          (i) {
                                            SectionList sectionItem =
                                                sectionList[i];
                                            dropdownvalue = sectionItem
                                                        .widget ==
                                                    InteractionWidget.DROPDOWN
                                                ? sectionItem.value ?? "Select"
                                                : ' ';
                                            List<InputClass> list = sectionItem
                                                            .widget ==
                                                        InteractionWidget
                                                            .DROPDOWN ||
                                                    sectionItem.widget ==
                                                        InteractionWidget
                                                            .AUTOCOMPLETE ||
                                                    sectionItem.widget ==
                                                        InteractionWidget
                                                            .MULTISELECT
                                                ? provider.getData2(sectionItem)
                                                : [];
                                            provider.checkboxlist = sectionItem
                                                        .widget ==
                                                    InteractionWidget.CHECKBOX
                                                ? provider.getData2(sectionItem)
                                                : [];

                                            return Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                sectionItem.widget ==
                                                            InteractionWidget
                                                                .BUTTON &&
                                                        sectionItem.input ==
                                                            'add'
                                                    ? const SizedBox.shrink()
                                                    : Padding(
                                                        padding:
                                                            const EdgeInsets
                                                                .only(
                                                                left: 8.0,
                                                                right: 8.0),
                                                        child: FittedBox(
                                                          fit: BoxFit.scaleDown,
                                                          child: Text(
                                                            sectionItem
                                                                    .validation!
                                                                    .isRequired
                                                                ? '${sectionItem.name}:*'
                                                                : '${sectionItem.name}:',
                                                            style: TextStyle(
                                                              color: Colors
                                                                  .orange
                                                                  .shade800,
                                                              fontSize: 18.0,
                                                              // fontSize: isTablet
                                                              //     ? 18
                                                              //     : 12,
                                                            ),
                                                          ),
                                                        ),
                                                      ),
                                                // SizedBox(
                                                //   height: isTablet ? 15 : 5,
                                                // ),
                                                returnWidget(
                                                    sectionItem: sectionItem,
                                                    item: item,
                                                    provider: provider,
                                                    list: list,
                                                    gridIndex: i,
                                                    listIndex: index,
                                                    widgetData:
                                                        sectionItem.widget!,
                                                    multiple: false),
                                                // SizedBox(
                                                //   height: isTablet ? 15 : 5,
                                                // ),

                                                // sectionItem.depid == 'pooja'
                                                // ? Text(
                                                //     sectionItem.validation!
                                                //             .isRequired
                                                //         ? '${sectionItem.depid}:*'
                                                //         : '${sectionItem.depid}:',
                                                //     style: TextStyle(
                                                //       color: Colors
                                                //           .orange.shade800,
                                                //       fontSize: isTablet
                                                //           ? 18
                                                //           : 12,
                                                //     ),
                                                //   )
                                                // : const SizedBox.shrink(),
                                              ],
                                            );
                                          },
                                        ),
                                      ),
                                    ),
                                    // SizedBox(
                                    //   height: isTablet ? 15 : 5,
                                    // ),
                                    item.multiple
                                        ? gridViewWidget(
                                            provider,
                                            item.sectionName,
                                            item.multipleList ?? [],
                                            orientation,
                                            item,
                                            index)
                                        : const SizedBox.shrink(),
                                    provider.interactionReponseList.length ==
                                            index - 1
                                        ? saveActions(provider)
                                        : const SizedBox.shrink()
                                    //const Spacer(),
                                  ],
                                ),
                              ),
                            ]);
                      },
                    ),
                  ),
                  // const Spacer(),
                  // saveActions(provider),
                ],
              ));
        }),
      );
    });
  }

  Widget returnWidget({
    required SectionList sectionItem,
    required FormFieldData item,
    required InteractionProvider provider,
    required List<InputClass> list,
    required int gridIndex,
    required int listIndex,
    required InteractionWidget widgetData,
    required bool multiple,
  }) {
    switch (widgetData) {
      case InteractionWidget.CHECKBOX:
        return (sectionItem.inputList!.length >= 5)
            ? customMultiselectDropdown(
                sectionItem, provider, sectionItem.inputList!, multiple)
            : buildCheckbox(sectionItem, item.sectionName, provider, multiple);

      case InteractionWidget.AUTOCOMPLETE:
        return customAutoCompletedropdown(
            sectionItem, provider, list, multiple);

      case InteractionWidget.MULTISELECT:
        return customMultiselectDropdown(sectionItem, provider, list, multiple);

      case InteractionWidget.RADIO:
        return (sectionItem.inputList!.length >= 5)
            ? customdropdown(
                sectionItem, provider, sectionItem.inputList!, multiple)
            : buildRadio(sectionItem, provider);

      case InteractionWidget.LABEL:
        return Text(sectionItem.input!);

      case InteractionWidget.RANGESLIDER:
        return CustomRangeSlider(
          max: double.parse(sectionItem.max!),
          min: double.parse(sectionItem.min!),
          sliderPos: sectionItem.selectedValue!.isNotEmpty
              ? double.parse(sectionItem.selectedValue!.last.toString())
              : double.parse(sectionItem.min!),
          onChanged: (val) {
            setState(() {
              sectionItem.selectedValue = [];
              sectionItem.selectedId = val.toString();
              sectionItem.selectedValue!.add(val.toInt());
            });
          },
        );

      case InteractionWidget.BUTTON:
        return sectionItem.input == 'add'
            ? const Offstage(
                offstage: true,
                child: Text("Visible"),
              )
            : Row(
                children: [
                  CustomButton(
                      backgroundColor: const Color.fromARGB(255, 233, 229, 229),
                      onPressed: () async {
                        sectionItem.selectedValue = [];
                        sectionItem.extension = [];
                        sectionItem.fileName = [];
                        await getEncodedFile(sectionItem);

                        setState(() {});
                      },
                      width: 120,
                      height: 40,
                      fontsize: 12,
                      textColor: Colors.black,
                      title: sectionItem.name),
                  const SizedBox(
                    width: 5,
                  ),
                  Text(
                    sectionItem.selectedValue!.isNotEmpty
                        ? sectionItem.selectedValue!.length > 1
                            ? 'Files uploaded'
                            : "File Uploaded"
                        : 'No file uploaded',
                    style: TextStyle(
                        color: sectionItem.selectedValue!.isNotEmpty
                            ? Colors.green
                            : Colors.red),
                  ),
                ],
              );

      case InteractionWidget.TEXT:
        return sectionItem.input == 'Date'
            ? buildDateWidget(sectionItem)
            : sectionItem.input == "textArea"
                ? Expanded(
                    child: InteractionTextField(
                      maxchars: int.parse(sectionItem.validation!.chars ?? "0"),
                      controller: sectionItem.controller!,
                      labelText: sectionItem.name,
                      //   maxlines: 8,
                      //minlines: 4,
                      onChanged: (val) {
                        sectionItem.selectedValue = [];
                        setState(() {});

                        sectionItem.selectedValue!.add(val);
                      },
                    ),
                  )
                ////Poojaaaaa
                : sectionItem.input == "text1"
                    ? Text(
                        sectionItem.depid!,
                        style: TextStyle(
                            fontSize: 18.0, fontWeight: FontWeight.normal),
                      )
                    : Padding(
                        padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                        child: SizedBox(
                          // width:
                          //     isTablet ? 200 : MediaQuery.of(context).size.width,
                          //height: isTablet ? 50 : 40,
                          width: MediaQuery.of(context).size.width,
                          child: InteractionTextField(
                            inputType: sectionItem.input == "number"
                                ? TextInputType.number
                                : TextInputType.name,
                            maxchars: int.parse(sectionItem.chars ?? "0"),
                            controller: sectionItem.controller!,
                            labelText: sectionItem.name,
                            onChanged: (val) {
                              sectionItem.selectedValue!.clear();
                              provider.setTextValue(val, sectionItem, multiple);
                            },
                          ),
                        ),
                      );
      case InteractionWidget.DROPDOWN:
        return customdropdown(sectionItem, provider, list, multiple);
    }
  }

  Future<void> requestPermission(Permission permission) async {
    final status = await permission.request();

    setState(() {
      print(status);
      // _permissionStatus = status;
      // print(_permissionStatus);
    });
  }

  Widget buildDateWidget(SectionList sectionItem) {
    return Padding(
      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
      child: SizedBox(
        // width: isTablet ? 200 : MediaQuery.of(context).size.width,
        // height: isTablet ? 50 : 40,
        width: MediaQuery.of(context).size.width,
        child: TextField(
          controller:
              sectionItem.controller, //editing controller of this TextField
          decoration: InputDecoration(
              // border: OutlineInputBorder(),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
              labelStyle: const TextStyle(fontSize: 16),
              suffixIcon: const Icon(Icons.calendar_today), //icon of text field
              labelText: "Enter Date" //label text of field
              ),
          readOnly: true, //set it true, so that user will not able to edit text
          onTap: () async {
            DateTime? pickedDate = await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(
                    2000), //DateTime.now() - not to allow to choose before today.
                lastDate: DateTime(2101));

            if (pickedDate != null) {
              print(
                  pickedDate); //pickedDate output format => 2021-03-10 00:00:00.000
              String formattedDate =
                  DateFormat('yyyy-MM-dd').format(pickedDate);
              print(
                  formattedDate); //formatted date output using intl package =>  2021-03-16
              //you can implement different kind of Date Format here according to your requirement

              setState(() {
                sectionItem.controller!.text = formattedDate;
                sectionItem.selectedValue = [];
                sectionItem.selectedValue!
                    .add(formattedDate); //set output date to TextField value.
              });
            } else {
              print("Date is not selected");
            }
          },
        ),
      ),
    );
  }

  Widget saveActions(InteractionProvider provider) {
    return Align(
      alignment: Alignment.centerRight,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Padding(
            padding: const EdgeInsets.all(4.0),
            child: CustomButton(
              backgroundColor: Colors.red.shade800,
              onPressed: () {
                //showDeleteProfileAlertDialog(context);
                for (var textcontrollers
                    in provider.textEditingControllerList) {
                  textcontrollers.text = '';
                }

                // setState(() {
                //   provider.resetAllWidgetsData();
                // });
              },
              textColor: Colors.white,
              title: "Reset",
              // height: 40,
              // width: isTablet ? 100 : 80,
              height: MediaQuery.of(context).size.height * 0.2,

              fontsize: isTablet ? 15 : 10.2,
            ),
          ),
          SizedBox(
            width: isTablet ? 20 : 4,
          ),
          Padding(
            padding: const EdgeInsets.all(4.0),
            child: CustomButton(
              backgroundColor: Colors.green.shade500,
              onPressed: () async {
                if (textFieldsValidation(provider).isEmpty) {
                  String record =
                      await provider.saveJsonObject(context, widget.form);
                  showAlertDialog(context, record);
                } else {
                  _displaySnackBar(textFieldsValidation(provider));
                }
              },
              textColor: Colors.white,
              title: "Save",
              // height: 40,
              // width: isTablet ? 100 : 80,
              height: MediaQuery.of(context).size.height * 0.2,

              //  width: MediaQuery.of(context).size.width * 0.1,
              fontsize: isTablet ? 16 : 12,
            ),
          ),
          SizedBox(
            width: isTablet ? 20 : 2,
          ),
        ],
      ),
    );
  }

  Widget buildRadio(SectionList sectionItem, InteractionProvider provider) {
    List<InputClass> list = provider.getData2(sectionItem);
    // .map((itemWord) => InputClass.fromJson(itemWord))
    // .toList();
    return Padding(
      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
      child: SizedBox(
        // width: isTablet ? 250 : MediaQuery.of(context).size.width,
        width: MediaQuery.of(context).size.width,

        child: Row(
          children: <Widget>[
            for (InputClass value in list)
              Row(
                children: [
                  Radio(
                    value: value.name,
                    activeColor: Colors.black,
                    groupValue: provider.radioValue,
                    onChanged: (String? value) {
                      setState(() {
                        print(value);
                        provider.radioValue = value!;
                        int index =
                            list.indexWhere((element) => element.name == value);
                        sectionItem.selectedValue!.add(list[index].id);
                      });
                    },
                  ),
                  Text(value.name),
                ],
              ),
          ],
        ),
      ),
    );
  }

  Widget buildCheckbox(SectionList sectionItem, String sectionName,
      InteractionProvider provider, bool multiple) {
    return Padding(
      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
      child: SizedBox(
        //  width: 250,
        width: MediaQuery.of(context).size.width,

        child: Row(
          children: <Widget>[
            for (var value in provider.checkboxlist)
              Row(
                children: [
                  FittedBox(
                    fit: BoxFit.scaleDown,
                    child: Checkbox(
                      value: value.ischecked ?? false,
                      activeColor: Colors.black,
                      checkColor: Colors.white,
                      onChanged: (bool? newvalue) {
                        value.ischecked = newvalue!;
                        provider.setcheckBoxValue(sectionItem, sectionName,
                            newvalue, value.id, multiple);
                        //setState(() {});
                      },
                    ),
                  ),
                  Text(value.name),
                ],
              ),
          ],
        ),
      ),
    );
  }

  Widget customdropdown(SectionList sectionItem, InteractionProvider provider,
      List<InputClass> list, bool multiple) {
    //   sectionItem.value = '';

    if (list.isEmpty) {
      list = [];
      InputClass inputClass =
          InputClass(id: "no value", name: "Select ${sectionItem.name}");
      list.add(inputClass);
      sectionItem.selectedObject = list[0];
    }
    // InputClass selectedObj = list[0];
    return Padding(
      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
      child: SizedBox(
        width: MediaQuery.of(context).size.width,
        // height: isTablet ? 60 : 40,
        child: DropdownButtonFormField2<InputClass>(
          isExpanded: true,
          decoration: InputDecoration(
            // Add Horizontal padding using menuItemStyleData.padding so it matches
            // the menu padding when button's width is not specified.
            contentPadding: const EdgeInsets.symmetric(vertical: 5),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(15),
            ),
            // Add more decoration..
          ),
          hint: Text(
            'Select ${sectionItem.name}',
            style: const TextStyle(fontSize: 14),
          ),
          items: list
              .map((item) => DropdownMenuItem<InputClass>(
                    value: item,
                    child: Text(
                      item.name,
                      style: const TextStyle(
                        fontSize: 14,
                      ),
                    ),
                  ))
              .toList(),
          value: sectionItem.selectedObject ?? list[0],
          //     // provider.getDropDownValue(sectionItem.value!, sectionItem, list)
          //     sectionItem.value ?? list[0].name,
          validator: (value) {
            if (value == null) {
              return 'Please select  ${sectionItem.name}';
            }
            return null;
          },
          onChanged: (value) {
            //Do something when selected item is changed.
            sectionItem.selectedObject = value!;
            sectionItem.value = value.id;
            provider.setDropDownValue(value.id, sectionItem, multiple);
            print("selected ${sectionItem.value}");
            //  setState(() {});
          },
          onSaved: (value) {
            sectionItem.selectedObject = value!;
            sectionItem.value = value.id;
            provider.setDropDownValue(value.id, sectionItem, multiple);
            // setState(() {});
          },
          buttonStyleData: const ButtonStyleData(
            padding: EdgeInsets.only(right: 8),
          ),
          iconStyleData: const IconStyleData(
            icon: Icon(
              Icons.arrow_drop_down,
              color: Colors.black45,
            ),
            iconSize: 24,
          ),
          dropdownStyleData: DropdownStyleData(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
            ),
          ),
          menuItemStyleData: const MenuItemStyleData(
            padding: EdgeInsets.symmetric(horizontal: 16),
          ),
        ),
      ),
    );
  }

  Widget customAutoCompletedropdown(SectionList sectionItem,
      InteractionProvider provider, List<InputClass> list, bool multiple) {
    // sectionItem.value = list[0].name;

    // if (list.isEmpty) {
    //   print("list is empty");
    list = sectionItem.inputList!;
    print("***Autocomplete list ${list[0].name}");
    //}
    //InputClass selectedObj = list[0];
    return Padding(
      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
      child: SizedBox(
        // width: isTablet ? 200 : MediaQuery.of(context).size.width,
        // height: isTablet ? 60 : 40,
        width: MediaQuery.of(context).size.width,

        child: DropdownButtonHideUnderline(
          child: DropdownButtonFormField2<InputClass>(
            isExpanded: true,
            decoration: InputDecoration(
              // Add Horizontal padding using menuItemStyleData.padding so it matches
              // the menu padding when button's width is not specified.
              contentPadding: const EdgeInsets.symmetric(vertical: 5),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
              ),
              // Add more decoration..
            ),
            hint: Text(
              'Select Item',
              style: TextStyle(
                fontSize: 14,
                color: Theme.of(context).hintColor,
              ),
            ),
            items: list
                .map((item) => DropdownMenuItem(
                      value: item,
                      child: Text(
                        item.name,
                        style: const TextStyle(
                          fontSize: 14,
                        ),
                      ),
                    ))
                .toList(),
            value: sectionItem.selectedObject,
            onSaved: (value) {
              sectionItem.selectedObject = value!;
              provider.setAutoCompleteValue(value.id, sectionItem, multiple);
              sectionItem.value = value.name;
            },
            onChanged: (value) {
              // setState(() {
              sectionItem.selectedObject = value!;
              provider.setAutoCompleteValue(value.id, sectionItem, multiple);
              sectionItem.value = value.name;
              // setState(() {});
              //});
            },

            buttonStyleData: const ButtonStyleData(
              padding: EdgeInsets.symmetric(horizontal: 16),
              height: 40,
              width: 200,
            ),
            dropdownStyleData: const DropdownStyleData(
              maxHeight: 200,
            ),
            menuItemStyleData: const MenuItemStyleData(
              height: 40,
            ),
            dropdownSearchData: DropdownSearchData(
              searchController: textEditingController,
              searchInnerWidgetHeight: 50,
              searchInnerWidget: Container(
                height: 50,
                padding: const EdgeInsets.only(
                  top: 8,
                  bottom: 4,
                  right: 8,
                  left: 8,
                ),
                child: TextFormField(
                  expands: true,
                  maxLines: null,
                  controller: textEditingController,
                  decoration: InputDecoration(
                    isDense: true,
                    contentPadding: const EdgeInsets.symmetric(
                      horizontal: 10,
                      vertical: 8,
                    ),
                    hintText: 'Search for an item...',
                    hintStyle: const TextStyle(fontSize: 12),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                ),
              ),
              searchMatchFn: (item, searchValue) {
                return item.value!.name.toString().contains(searchValue);
              },
            ),
            //This to clear the search value when you close the menu
            onMenuStateChange: (isOpen) {
              if (!isOpen) {
                textEditingController.clear();
              }
            },
          ),
        ),
      ),
    );
  }

  Widget customMultiselectDropdown(SectionList sectionItem,
      InteractionProvider provider, List<InputClass> list, bool multiple) {
    if (list.isEmpty) {
      list = sectionItem.inputList!;
    }
    InputClass selectedObj = list[0];

    return Padding(
      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
      child: SizedBox(
        // width: isTablet ? 200 : MediaQuery.of(context).size.width,
        // height: isTablet ? 60 : 40,
        width: MediaQuery.of(context).size.width,
        // height: MediaQuery.of(context).size.height,

        child: DropdownButtonHideUnderline(
          child: DropdownButtonFormField2<InputClass>(
            isExpanded: true,
            decoration: InputDecoration(
              // Add Horizontal padding using menuItemStyleData.padding so it matches
              // the menu padding when button's width is not specified.
              contentPadding: const EdgeInsets.symmetric(vertical: 5),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
              ),
              // Add more decoration..
            ),
            hint: Text(
              'Select Items',
              style: TextStyle(
                fontSize: 14,
                color: Theme.of(context).hintColor,
              ),
            ),
            items: list.map((item) {
              return DropdownMenuItem(
                value: item,
                //disable default onTap to avoid closing menu when selecting an item
                enabled: false,
                child: StatefulBuilder(
                  builder: (context, menuSetState) {
                    final isSelected =
                        sectionItem.selectedValue!.contains(item.name);
                    return InkWell(
                      onTap: () {
                        isSelected
                            ? sectionItem.selectedValue!.remove(item.name)
                            : sectionItem.selectedValue!.add(item.name);
                        //This rebuilds the StatefulWidget to update the button's text
                        setState(() {});
                        //This rebuilds the dropdownMenu Widget to update the check mark
                        menuSetState(() {});
                      },
                      child: Container(
                        height: double.infinity,
                        padding: const EdgeInsets.symmetric(horizontal: 16.0),
                        child: Row(
                          children: [
                            if (isSelected)
                              const Icon(Icons.check_box_outlined)
                            else
                              const Icon(Icons.check_box_outline_blank),
                            const SizedBox(width: 16),
                            Expanded(
                              child: Text(
                                item.name,
                                style: const TextStyle(
                                  fontSize: 14,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              );
            }).toList(),
            //Use last selected item as the current value so if we've limited menu height, it scroll to last item.
            value: selectedObj,
            // ? null
            // : provider.selectedItems.last,
            onChanged: (value) {
              selectedObj = value!;
              provider.setAutoCompleteValue(value.id, sectionItem, multiple);
              sectionItem.value = value.name;
            },
            onSaved: (value) {
              selectedObj = value!;
              provider.setAutoCompleteValue(value.id, sectionItem, multiple);
              sectionItem.value = value.name;
            },
            selectedItemBuilder: (context) {
              return list.map(
                (item) {
                  return Container(
                    alignment: AlignmentDirectional.center,
                    child: Text(
                      sectionItem.selectedValue!.join(', '),
                      style: const TextStyle(
                        fontSize: 14,
                        overflow: TextOverflow.ellipsis,
                      ),
                      maxLines: 1,
                    ),
                  );
                },
              ).toList();
            },
            buttonStyleData: const ButtonStyleData(
              padding: EdgeInsets.only(left: 16, right: 8),
              height: 40,
              width: 140,
            ),
            menuItemStyleData: const MenuItemStyleData(
              height: 40,
              padding: EdgeInsets.zero,
            ),
          ),
        ),
      ),
    );
  }

  Widget gridViewWidget(
      InteractionProvider provider,
      String sectionName,
      List<SectionList> sectionList,
      Orientation orientation,
      FormFieldData item,
      int listIndex) {
    List<String> items = [];

    for (var obj in sectionList) {
      items.add(obj.name);
    }

    Map<String, int> count = {};
    for (var i in items) {
      count[i] = (count[i] ?? 0) + 1;
    }
    print(count['delete']);

    return Padding(
      padding: isTablet
          ? const EdgeInsets.only(left: 8.0)
          : const EdgeInsets.only(left: 12.0, right: 12.0),
      child: Card(
        child: GridView.count(
          physics: const NeverScrollableScrollPhysics(),
          crossAxisCount: context.responsive<int>(
            1, // default
            sm: 1, // small
            md: 2, // medium
            lg: sectionList.length == 1 ? 1 : 4, // large
            xl: 5, // extra large screen
          ),
          mainAxisSpacing: sectionList.length == 1 || !isTablet ? 1 : 2,
          shrinkWrap: true,
          padding: EdgeInsets.zero,
          childAspectRatio: sectionList.length == 1 || !isTablet
              ? orientation == Orientation.landscape
                  ? 10
                  : 4.2
              : 3,
          children: List.generate(
            sectionList.length,
            (i) {
              print(sectionList);
              SectionList sectionItem = sectionList[i];
              dropdownvalue = sectionItem.widget == InteractionWidget.DROPDOWN
                  ? sectionItem.value ?? "Select"
                  : ' ';
              List<InputClass> list = sectionItem.widget ==
                          InteractionWidget.DROPDOWN ||
                      sectionItem.widget == InteractionWidget.AUTOCOMPLETE ||
                      sectionItem.widget == InteractionWidget.MULTISELECT
                  ? provider.getData2(sectionItem)
                  : [];
              provider.checkboxlist =
                  sectionItem.widget == InteractionWidget.CHECKBOX
                      ? provider.getData2(sectionItem)
                      : [];

              return Wrap(runAlignment: WrapAlignment.spaceEvenly, children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    sectionItem.widget == InteractionWidget.BUTTON &&
                                sectionItem.input == 'add' ||
                            sectionItem.input == 'deletebtn'
                        ? const SizedBox.shrink()
                        : Text(
                            '${sectionItem.name}:*',
                            style: TextStyle(
                              color: Colors.orange.shade800,
                              fontSize: isTablet ? 18 : 14,
                            ),
                          ),
                    // const SizedBox(
                    //   height: 15,
                    // ),
                    sectionItem.widget == InteractionWidget.BUTTON
                        ? sectionItem.input == 'chooseFile'
                            ? Row(
                                children: [
                                  CustomButton(
                                      backgroundColor: const Color.fromARGB(
                                          255, 233, 229, 229),
                                      onPressed: () async {
                                        sectionItem.selectedValue = [];
                                        sectionItem.extension = [];
                                        sectionItem.fileName = [];
                                        await getEncodedFile(sectionItem);

                                        setState(() {});
                                      },
                                      width: 120,
                                      height: 40,
                                      fontsize: 12,
                                      textColor: Colors.black,
                                      title: sectionItem.name),
                                  const SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    sectionItem.selectedValue!.isNotEmpty
                                        ? sectionItem.selectedValue!.isNotEmpty
                                            ? 'File uploaded'
                                            : "Files Uploaded"
                                        : 'No file uploaded',
                                    style: TextStyle(
                                        color: sectionItem
                                                .selectedValue!.isNotEmpty
                                            ? Colors.green
                                            : Colors.red),
                                  ),
                                ],
                              )
                            : isTablet
                                ? Row(
                                    children: [
                                      Expanded(
                                        // width: MediaQuery.of(context).size.width,
                                        child: IconButton(
                                          onPressed: () {
                                            provider.deleteMultipleRows(
                                                sectionItem.gid!,
                                                sectionList[i],
                                                sectionName);

                                            setState(() {});
                                          },
                                          icon: const Icon(
                                            Icons.cancel,
                                            size: 30,
                                            color:
                                                Color.fromARGB(255, 8, 39, 92),
                                          ),
                                        ),
                                      ),
                                    ],
                                  )
                                : Padding(
                                    padding: const EdgeInsets.only(
                                        left: 3.0, top: 5),
                                    child: CustomButton(
                                        backgroundColor: const Color.fromARGB(
                                            255, 233, 75, 75),
                                        onPressed: () {
                                          provider.deleteMultipleRows(
                                              sectionItem.gid!,
                                              sectionList[i],
                                              sectionName);

                                          setState(() {});
                                        },
                                        // width: 80,
                                        // height: 30,

                                        height: 40,

                                        // height:
                                        //     MediaQuery.of(context).size.height *
                                        //         0.2,
                                        fontsize: 12,
                                        textColor: Colors.white,
                                        title: "Delete"),
                                  )
                        : returnWidget(
                            sectionItem: sectionItem,
                            item: item,
                            provider: provider,
                            list: list,
                            gridIndex: i,
                            listIndex: listIndex,
                            widgetData: sectionItem.widget!,
                            multiple: true),
                  ],
                ),
              ]);
            },
          ),
        ),
      ),
    );
  }

  String fieldsValidation(InteractionProvider provider) {
    List<SectionList> secList = provider.sectionList
        .where((element) => element.validation!.isRequired = true)
        .toList();
    if (secList.any((element) => element.selectedValue!.isEmpty)) {
      return 'Fields cannot be empty';
    }
    return '';
  }

  String textFieldsValidation(InteractionProvider provider) {
    // if (provider.sectionList
    //     .any((element) => element.widget == InteractionWidget.TEXT)) {
    // if (provider.sectionList
    //     .any((element) => element.controller!.text.isEmpty)) {
    //   return 'Fields cannot be empty';
    // }
    // if (provider.textEditingControllerList.isNotEmpty) {
    //   if (provider.validateTextFields()) {
    //     return 'Fields cannot be empty';
    //   }
    // }

    // if (provider.multipletextEditingControllerList.isNotEmpty) {
    //   if (provider.validateMultipleRows()) {
    //     return 'Fields cannot be empty';
    //   }
    // }
    // }

    return '';
  }

  _displaySnackBar(String msg) {
    final snackBar = SnackBar(
        content: Text(
      msg,
      style: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
    ));
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
    //scaffoldKeyLogin.currentState!.showSnackBar(snackBar);
  }

  Future<void> getEncodedFile(SectionList sectionItem) async {
    String base64Image = '';
    var status = Platform.isAndroid
        ? await Permission.manageExternalStorage.status
        : await Permission.storage.status;
    if (status.isGranted) {
      FilePickerResult? result =
          await FilePicker.platform.pickFiles(allowMultiple: true);

      if (result != null) {
        print(result.files.first.path);
        print(result.files.last.path);
        for (var files in result.files) {
          File file = File(files.path!);
          print("check file path : ${file.path}");
          fileName = file.path.split('/').last;
          // Get the application folder directory
          Directory? directory = Platform.isAndroid
              ? await getExternalStorageDirectory() //FOR ANDROID
              : await getApplicationDocumentsDirectory();
          String newPath = ""; //FOR ios
          String convertedDirectoryPath = (directory?.path).toString();

          print("see the converted directory path $convertedDirectoryPath");

          newPath = "$convertedDirectoryPath/konectar/files";
          print("new path :$newPath");
          directory = Directory(newPath);
          if (!await directory.exists()) {
            await directory.create(recursive: true);
          }
          File newFile = await file.copy('${directory.path}/$fileName');
          print("new path is ${newFile.path}");
          final extension = p.extension(newFile.path);
          List<int> imageBytes = await newFile.readAsBytes();
          Uint8List imageUint8List = Uint8List.fromList(imageBytes);
          base64Image = base64Encode(imageUint8List);
          sectionItem.selectedValue!.add(base64Image);
          sectionItem.extension!.add(extension);
          sectionItem.fileName!.add(fileName);
        }
      }
    } else {
      print("not permitted");
      await requestPermission(Platform.isAndroid
          ? Permission.manageExternalStorage
          : Permission.storage);
    }
  }

  showAlertDialog(BuildContext context, String record) {
    // set up the buttons
    // ViewInteractionProvider provider =
    //     Provider.of<ViewInteractionProvider>(context, listen: false);
    Widget cancelButton = TextButton(
      child: const Text("Ok"),
      onPressed: () async {
        Navigator.of(context).pop();
        Navigator.of(context).pop();
      },
    );

    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      title: const Text(""),
      content: Text("Form $record Saved Successfully!"),
      actions: [
        cancelButton,
      ],
    );

    // show the dialog
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }
}