telnow_2025/lib/src/layouts/mobile/menu_home.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:drag_and_drop_lists/drag_and_drop_lists.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:provider/provider.dart';
import 'package:telnow_mobile_new/src/api/api_auth_provider.dart';
import 'package:telnow_mobile_new/src/injector/injector.dart';
import 'package:telnow_mobile_new/src/layouts/functions/home.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:telnow_mobile_new/src/layouts/mobile/banner_detail.dart';
import 'package:telnow_mobile_new/src/layouts/mobile/message_list.dart';
import 'package:telnow_mobile_new/src/layouts/mobile/request_create.dart';
import 'package:telnow_mobile_new/src/layouts/mobile/request_select.dart';
import 'package:telnow_mobile_new/src/layouts/components/template.dart';
import 'package:telnow_mobile_new/src/storage/sharedpreferences/shared_preferences_manager.dart';
import 'package:telnow_mobile_new/src/utils/C.dart';
import 'package:telnow_mobile_new/src/utils/U.dart';
import 'package:telnow_mobile_new/src/utils/cache_manager.dart';
import 'package:telnow_mobile_new/src/utils/provider.dart';
import 'package:url_launcher/url_launcher.dart';

class MobHomePage extends StatefulWidget {
  const MobHomePage({super.key});

  @override
  State<MobHomePage> createState() => _MobHomePageState();
}

class _MobHomePageState extends State<MobHomePage> with WidgetsBindingObserver {
  final HomeFunction homeFunc = HomeFunction();
  final SharedPreferencesManager sharedPreferencesManager = locator<SharedPreferencesManager>();
  bool _timeLimit = false;
  String _localeIndex = 'id';

  @override
  void initState() {
    Provider.of<ServiceModule>(context, listen: false).reset();
    Provider.of<UserModule>(context, listen: false).reset();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      Future.delayed(Duration(seconds: 1), (){
        homeFunc.getProfileData(context);
      });

      FirebaseMessaging.onMessage.listen((event) {
        if(event.data['type'] == 'MESSAGE'){
          homeFunc.getUnreadMessages(context);
        }
      });
    });
    WidgetsBinding.instance.addObserver(this);
    checkCompatibility();
    // TODO: implement initState
    super.initState();
  }

  checkCompatibility() async{
    print("checkCompatibility");
    var isCompatible = await U.isCompatibleWith(VersionKey.multiBahasa);
    print("isCompatibleWith $isCompatible");
    if(isCompatible) {
      homeFunc.getContactCenter(context);
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _localeIndex = U.newServerVersion(1754624839) ? U.getLangIndex(context.locale.toString()) : context.locale.toString();
    return Provider.of<UserModule>(context).user().isNotEmpty?Scaffold(
      backgroundColor: backgroundColor,
      body: Column(
        children: [
          Container(
            width: double.infinity,
            color: primaryColor,
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
            child: SafeArea(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('${Provider.of<UserModule>(context).user()['name']}${(Provider.of<UserModule>(context).user()['guestName'] != null && Provider.of<UserModule>(context).user()['guestName'] != '' ? ' - ${Provider.of<UserModule>(context).user()['guestName']}' : '')}', style: TextStyle(color: Colors.white, fontSize: 18), overflow: TextOverflow.ellipsis),
                      Row(
                        children: [
                          //TODO: tambah pengecekan server version disini
                          FutureBuilder<bool>(
                            future: U.isCompatibleWith(VersionKey.multiBahasa),
                            builder: (context, snapshot) {
                              if (!snapshot.hasData) {
                                return SizedBox(); // or a loading spinner
                              }

                              final isCompatible = snapshot.data!;
                              final hasContactCenter = Provider.of<ServiceModule>(context, listen: false)
                                  .contactCenter()
                                  .toString()
                                  .isNotEmpty;

                              if (isCompatible && hasContactCenter) {
                                return GestureDetector(
                                    onTap: () => launchUrl(Uri.parse(Provider.of<ServiceModule>(context, listen: false).contactCenter().toString())),
                                    child: U.iconsax('phone-number', color: Colors.white, size: 26.0)
                                ); // replace with the widget you want to show
                              } else {
                                return SizedBox(); // or nothing
                              }
                            },
                          ),
                          // U.isCompatibleWith(VersionKey.multiBahasa) && Provider.of<ServiceModule>(context, listen: false).contactCenter().toString() != ''  ? GestureDetector(
                          //   onTap: () => launchUrl(Uri.parse(Provider.of<ServiceModule>(context, listen: false).contactCenter().toString())),
                          //   child: U.iconsax('phone-number', color: Colors.white, size: 26.0)
                          // ):SizedBox(),
                          SizedBox(width: 8),
                          GestureDetector(
                            child: Stack(
                              alignment: Alignment.topRight,
                              children: [
                                U.iconsax('sms-notification', color: Colors.white, size: 32.0),
                                Provider.of<ServiceModule>(context).unreadMessage() ? Container(
                                  width: 13, height: 13, margin: EdgeInsets.only(top: 1.3),
                                  decoration: BoxDecoration(color: Colors.red, borderRadius: BorderRadius.all(Radius.circular(50))),
                                ):Container()
                              ],
                            ),
                            onTap: ()=>navigateTo(context, MobMessageListPage(Provider.of<UserModule>(context, listen: false).user())).then((_){
                              homeFunc.getUnreadMessages(context);
                            }),
                          )
                        ],
                      )
                    ],
                  ),
                  Provider.of<UserModule>(context).profile()['greeting'][context.locale.toString()] != null ? Text(Provider.of<UserModule>(context).profile()['greeting'][context.locale.toString()], style: TextStyle(color: Colors.white, fontSize: 14), overflow: TextOverflow.ellipsis) : Container(),
                  SizedBox(height: 8),
                  Row(
                    children: [
                      Expanded(
                        child: GestureDetector(
                          child: Container(
                            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12,),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.all(Radius.circular(50))
                            ),
                            child: Row(
                              children: [
                                U.iconsax('search-normal-1', color: textColor),
                                SizedBox(width: 13),
                                Expanded(child: Text(Provider.of<UserModule>(context).profile()['searchText'][context.locale.toString()] != null ? Provider.of<UserModule>(context).profile()['searchText'][context.locale.toString()] : 'searchAsk'.tr(), style: TextStyle(color: textColor.withValues(alpha: 0.5), fontSize: 14), overflow: TextOverflow.ellipsis))
                              ],
                            ),
                          ),
                          onTap: () => navigateTo(context, MobReqSelectPage(user: Provider.of<UserModule>(context, listen: false).user(), title: 'search'.tr(), scope: Provider.of<ServiceModule>(context, listen: false).scoopeValue(), placeholder: Provider.of<UserModule>(context, listen: false).profile()['searchText'][context.locale.toString()] != null ? Provider.of<UserModule>(context, listen: false).profile()['searchText'][context.locale.toString()] : 'searchAsk'.tr())).then((val){
                            val = val??true;
                            if(val) homeFunc.getFrequentlyRequested(context);
                          }),
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              alignment: Alignment.topCenter,
              width: U.bodyWidth(context),
              child: EasyRefresh(
                triggerAxis: Axis.vertical,
                header: MaterialHeader(clamping: true, color: primaryColor),
                onRefresh: ()=>homeFunc.onRefresh(context),
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      dndStatus(),
                      Container(
                        margin: EdgeInsets.fromLTRB(16, 16, 16, 16),
                        child: Row(
                          children: [
                            GestureDetector(child: Icon(Icons.info_outline, color: Color(0xff0021CE), size: 20), onTap: () => showSuccess(context, "scopeDesc".tr()),),
                            SizedBox(width: 8),
                            Text('scope'.tr(), style: TextStyle(color: textColor, fontSize: 14)),
                            SizedBox(width: 16),
                            GestureDetector(
                              child: Container(
                                padding: EdgeInsets.fromLTRB(16, 4, 16, 4),
                                child: Row(
                                  children: [
                                    Text(Provider.of<ServiceModule>(context).scoopeName(), style: TextStyle(color: primaryColor, fontSize: 14)),
                                    SizedBox(width: 8),
                                    U.iconsax('arrow-down-1', color: primaryColor, size: 14),
                                  ],
                                ),
                                decoration: BoxDecoration(
                                    color: primaryColor.withValues(alpha: 0.1),
                                    borderRadius: BorderRadius.all(Radius.circular(50))
                                ),
                              ),
                              onTap: (){
                                if(Provider.of<ServiceModule>(context, listen: false).scoope().isNotEmpty){
                                  showModalBottomSheet<void>(
                                    context: context,
                                    backgroundColor: Colors.white,
                                    builder: (BuildContext contexts) {
                                      return SafeArea(
                                        child: Column(
                                          mainAxisSize: MainAxisSize.min,
                                          children: [
                                            Container(
                                              margin: EdgeInsets.symmetric(vertical: 16),
                                              child: Text('changeScope'.tr(), style: TextStyle(color: textColor, fontSize: 14), textAlign: TextAlign.center),
                                            ),
                                            divider(),
                                            SizedBox(height: 16),
                                            Column(
                                              children: List.generate(Provider.of<ServiceModule>(context).getScoopeLength(), (i){
                                                return GestureDetector(
                                                    child: Container(
                                                      color: Colors.white,
                                                      padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
                                                      child: Row(
                                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                        children: [
                                                          Text(Provider.of<ServiceModule>(context).scoope()[i]['value'], style: TextStyle(color: textColor, fontSize: 14)),
                                                          Icon(Provider.of<ServiceModule>(context).checkScoope(Provider.of<ServiceModule>(context).scoope()[i]['key'])?Icons.radio_button_checked:Icons.radio_button_off, color: Provider.of<ServiceModule>(context).checkScoope(Provider.of<ServiceModule>(context).scoope()[i]['key'])?primaryColor:Colors.black45, size: 22),
                                                        ],
                                                      ),
                                                    ),
                                                    onTap: () async{
                                                      await sharedPreferencesManager.putString(SharedPreferencesManager.keyScoope, Provider.of<ServiceModule>(context, listen: false).scoope()[i]['key']);
                                                      Provider.of<ServiceModule>(context, listen: false).setScoopeValue(Provider.of<ServiceModule>(context, listen: false).scoope()[i]['key']);
                                                      Provider.of<ServiceModule>(context, listen: false).setScoopeName(Provider.of<ServiceModule>(context, listen: false).scoope()[i]['value']);
                                                      Navigator.of(contexts).pop();
                                        
                                                      var profile = Provider.of<UserModule>(context, listen: false).profile();
                                                      if(profile['topMenu']['show'] != null && profile['topMenu']['show'] == true) {
                                                        if(U.newServerVersion(1709864293)){
                                                          homeFunc.getTopMenuNew(context);
                                                        }
                                                        else{
                                                          homeFunc.getTopMenu(context);
                                                          homeFunc.getReqGroup(context);
                                                        }
                                                      }
                                                      if(profile['specialOffer'] != null && profile['specialOffer']['show'] == true) homeFunc.getSpecialOffer(context);
                                                      if(profile['frequentlyRequested'] != null && profile['frequentlyRequested']['show'] == true) homeFunc.getFrequentlyRequested(context);
                                                      if(profile['banner'] != null && profile['banner']['show'] == true) homeFunc.getBanner(context);
                                                      if(profile['quickAction'] != null && profile['quickAction']['show'] == true) homeFunc.getQuickAction(context);
                                                    }
                                                );
                                              }),
                                            ),
                                            SizedBox(height: 16),
                                          ],
                                        ),
                                      );
                                    },
                                  );
                                }
                              },
                            )
                          ],
                        ),
                      ),
                      Provider.of<UserModule>(context).profile()['topMenu']['show'] != null && Provider.of<UserModule>(context).profile()['topMenu']['show'] == true ? Container(
                        margin: EdgeInsets.symmetric(horizontal: 16),
                        child: Provider.of<ServiceModule>(context).topMenu() != null && Provider.of<ServiceModule>(context).reqGroup() != null?Column(
                          children: List.generate(((Provider.of<ServiceModule>(context).topMenu()!.length+1)/4).ceil(), (i){
                            double size = U.bodyWidth(context)/6;
                            return Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: List.generate(4, (j){
                                int index = i==0?j:j+(4*i);
                                bool hideOther = index == Provider.of<ServiceModule>(context).topMenu()!.length && U.servantDisplay() && Provider.of<ServiceModule>(context).reqGroup()!.length == 0;
                                return index <= Provider.of<ServiceModule>(context).topMenu()!.length ? GestureDetector(
                                  child: Column(
                                    children: [
                                      i>0?SizedBox(height: hideOther ? 0:16):Container(),
                                      hideOther ? Container(width: size) : index == Provider.of<ServiceModule>(context).topMenu()!.length ? Container(
                                        child: Container(
                                          padding: EdgeInsets.all(5),
                                          child: SizedBox(
                                            width: size, height: size,
                                            child: U.iconsax('category', color: Color(0xff564F4F), size: kIsWeb?40:34),
                                          ),
                                          decoration: BoxDecoration(
                                              color: Colors.white,
                                              borderRadius: BorderRadius.all(Radius.circular(20)),
                                              boxShadow: [BoxShadow(color: Colors.grey.withValues(alpha: 0.3), blurRadius: 3, offset: Offset(0, 1))]
                                          ),
                                        ),
                                      ):categoryContainer(context: context, iconUrl: Provider.of<ServiceModule>(context).topMenu()![index]['iconUrl']),
                                      SizedBox(height: hideOther ? 0:8),
                                      hideOther ? Container(width: 70) : SizedBox(
                                        width: 70,
                                        child: Text(index == Provider.of<ServiceModule>(context).topMenu()!.length? 'more'.tr() : U.servantDisplay() ? Provider.of<ServiceModule>(context).topMenu()![index]['description'] : Provider.of<ServiceModule>(context).topMenu()![index][U.langColumn(context, 'description')]??'', style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w300), maxLines: 2, overflow: TextOverflow.ellipsis, textAlign: TextAlign.center),
                                      )
                                    ],
                                  ),
                                  onTap: (){
                                    if(index == Provider.of<ServiceModule>(context, listen: false).topMenu()!.length){
                                      if(!hideOther){
                                        navigateTo(context, MobMenuDisplayPage(scope: Provider.of<ServiceModule>(context, listen: false).scoopeValue()));
                                      }
                                    }
                                    else{
                                      navigateTo(context, MobReqSelectPage(user: Provider.of<UserModule>(context, listen: false).user(), title: U.servantDisplay() ? Provider.of<ServiceModule>(context, listen: false).topMenu()![index]['description'] : Provider.of<ServiceModule>(context, listen: false).topMenu()![index][U.langColumn(context, 'description')]??'', scope: Provider.of<ServiceModule>(context, listen: false).scoopeValue(), groupCode: Provider.of<ServiceModule>(context, listen: false).topMenu()![index]['code'])).then((val){
                                        val = val??true;
                                        if(val) homeFunc.getFrequentlyRequested(context);
                                      });
                                    }
                                  },
                                ):Container(width: size);
                              }),
                            );
                          }),
                        ):shimmerTopMenu(context),
                      ):Container(),

                      Provider.of<UserModule>(context).profile()['specialOffer'] != null && Provider.of<UserModule>(context).profile()['specialOffer']['show'] == true ? Container(
                        margin: EdgeInsets.only(top: 36),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(
                              padding: EdgeInsetsDirectional.only(start: 16),
                              child: Text(
                                Provider.of<UserModule>(context).profile()['specialOffer']['label'][_localeIndex]??'Not Set',
                                style: TextStyle(color: textColor, fontSize: 17, fontWeight: FontWeight.w500),
                              )),
                            SizedBox(height: 12),
                            Provider.of<ServiceModule>(context).specialOffer().length > 0 ? SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                              child: Row(
                                children: List.generate(Provider.of<ServiceModule>(context).specialOffer().length, (i) => GestureDetector(
                                  child: Container(
                                    width: U.bodyWidth(context) - 60,
                                    margin: EdgeInsets.only(left: i==0?16:0, right: 16),
                                    padding: EdgeInsets.only(right: 16),
                                    decoration: BoxDecoration(
                                        color: Colors.white,
                                        border: Border.all(color: textColor.withValues(alpha: 0.15)),
                                        borderRadius: BorderRadius.all(Radius.circular(12))
                                    ),
                                    child: Row(
                                      children: [
                                        imageTiles(imageUrl: Provider.of<ServiceModule>(context).specialOffer()[i]['_mobileImage'] ?? "null"),
                                        SizedBox(width: 16),
                                        Expanded(
                                          child: Column(
                                            crossAxisAlignment: CrossAxisAlignment.start,
                                            children: [
                                              Text(Provider.of<ServiceModule>(context).specialOffer()[i][U.langColumn(context, 'subject')], style: TextStyle(color: textColor, fontWeight: FontWeight.w500), overflow: TextOverflow.ellipsis),
                                              dashed(),
                                              Text(Provider.of<ServiceModule>(context).specialOffer()[i][U.langColumn(context, 'subjectDescription')], style: TextStyle(color: textColor, fontSize: 13, fontWeight: FontWeight.w300), maxLines: 2, overflow: TextOverflow.ellipsis)
                                            ],
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                  onTap: ()=>navigateTo(context, MobReqCreatePage(user: Provider.of<UserModule>(context, listen: false).user(), request: Provider.of<ServiceModule>(context, listen: false).specialOffer()[i])),
                                )),
                              ),
                            ) : emptyWidget(),
                          ],
                        ),
                      ):Container(),

                      Provider.of<UserModule>(context).profile()['frequentlyRequested'] != null && Provider.of<UserModule>(context).profile()['frequentlyRequested']['show'] == true ? Container(
                        margin: EdgeInsets.only(top: 36),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(padding: EdgeInsetsDirectional.only(start: 16), child: Text(Provider.of<UserModule>(context).profile()['frequentlyRequested']['label'][_localeIndex]??'Not Set', style: TextStyle(color: textColor, fontSize: 17, fontWeight: FontWeight.w500))),
                            SizedBox(height: 12),
                            Provider.of<ServiceModule>(context).data().length > 0 ? SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: List.generate(Provider.of<ServiceModule>(context).data().length, (i){
                                  return GestureDetector(
                                    child: Container(
                                      margin: EdgeInsets.only(left: i==0?16:0, right: 16),
                                      width: U.bodyWidth(context)/(kIsWeb?3.8:2.6), height: U.bodyWidth(context)/(kIsWeb?3:2),
                                      decoration: BoxDecoration(
                                          color: Colors.white,
                                          border: Border.all(color: textColor.withValues(alpha: 0.15)),
                                          borderRadius: BorderRadius.all(Radius.circular(12))
                                      ),
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          Expanded(
                                            child: Container(
                                              width: double.infinity, height: double.infinity,
                                              child: Provider.of<ServiceModule>(context).data()[i]['_mobileImage'] != null ? null : Center(child: Text("noImage".tr(), style: TextStyle(fontStyle: FontStyle.italic, color: Colors.black38), textAlign: TextAlign.center)),
                                              decoration: BoxDecoration(
                                                color: textColor.withValues(alpha: 0.1),
                                                borderRadius: BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12)),
                                                image: Provider.of<ServiceModule>(context).data()[i]['_mobileImage'] != null ? DecorationImage(
                                                  image: CachedNetworkImageProvider(Provider.of<ServiceModule>(context).data()[i]['_mobileImage']+'?bridge-cache=true', cacheManager: CacheManager(CacheMan.config(Provider.of<ServiceModule>(context).data()[i]['_mobileImage']))),
                                                  fit: BoxFit.cover,
                                                ):null,
                                              ),
                                            ),
                                          ),
                                          Container(
                                            padding: EdgeInsets.symmetric(vertical: 12, horizontal: 6),
                                            child: Column(
                                              crossAxisAlignment: CrossAxisAlignment.start,
                                              children: [
                                                Text(Provider.of<ServiceModule>(context).data()[i][U.langColumn(context, 'subject')]??'', style: TextStyle(color: textColor), overflow: TextOverflow.ellipsis),
                                                SizedBox(height: 5),
                                                Text(Provider.of<ServiceModule>(context).data()[i]['_frequentlyCount'].toString() + 'times'.tr(), style: TextStyle(color: textColor, fontSize: 14, fontWeight: FontWeight.w500), overflow: TextOverflow.ellipsis)
                                              ],
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                    onTap: ()=>navigateTo(context, MobReqCreatePage(user: Provider.of<UserModule>(context, listen: false).user(), request: Provider.of<ServiceModule>(context, listen: false).data()[i])).then((val){
                                      val = val??true;
                                      if(val) homeFunc.getFrequentlyRequested(context);
                                    }),
                                  );
                                }),
                              ),
                            ) : emptyWidget(),
                          ],
                        ),
                      ):Container(),

                      Provider.of<UserModule>(context).profile()['banner'] != null && Provider.of<UserModule>(context).profile()['banner']['show'] == true ? Container(
                        margin: EdgeInsets.only(top: 36, left: 16, right: 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(Provider.of<UserModule>(context).profile()['banner']['label'][_localeIndex]??'Not Set', style: TextStyle(color: textColor, fontSize: 17, fontWeight: FontWeight.w500)),
                            SizedBox(height: 12),
                            Provider.of<ServiceModule>(context).banner().isNotEmpty ? CarouselSlider.builder(
                              itemCount: Provider.of<ServiceModule>(context).banner().length,
                              options: CarouselOptions(
                                height: U.bodyWidth(context)/(kIsWeb?1.7:1.5),
                                initialPage: 0,
                                viewportFraction: 1,
                                autoPlay: true,
                                autoPlayInterval: Duration(seconds: 5),
                                autoPlayAnimationDuration: Duration(seconds: 1),
                                autoPlayCurve: Curves.fastOutSlowIn,
                                enlargeCenterPage: true,
                                enableInfiniteScroll: true,
                                scrollDirection: Axis.horizontal,
                              ),
                              itemBuilder: (BuildContext context, int i, int pageViewIndex) => GestureDetector(
                                child: Container(
                                  width: double.infinity,
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      border: Border.all(color: textColor.withValues(alpha: 0.15)),
                                      borderRadius: BorderRadius.all(Radius.circular(12))
                                  ),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      // Expanded(child: imageTiles(imageUrl: Provider.of<ServiceModule>(context).banner()[i]['image'], width: double.infinity, height: double.infinity)),
                                      Expanded(
                                        child: Container(
                                          width: double.infinity, height: double.infinity,
                                          child: Provider.of<ServiceModule>(context).banner()[i]['image'] != null ? null : Center(child: Text("noImage".tr(), style: TextStyle(fontStyle: FontStyle.italic, color: Colors.black38), textAlign: TextAlign.center)),
                                          decoration: BoxDecoration(
                                            color: textColor.withValues(alpha: 0.1),
                                            borderRadius: BorderRadius.all(Radius.circular(12)),
                                            image: Provider.of<ServiceModule>(context).banner()[i]['image'] != null ? DecorationImage(
                                              image: CachedNetworkImageProvider(Provider.of<ServiceModule>(context).banner()[i]['image']+'?bridge-cache=true', cacheManager: CacheManager(CacheMan.config(Provider.of<ServiceModule>(context).banner()[i]['image']))),
                                              fit: BoxFit.cover,
                                            ):null,
                                          ),
                                        ),
                                      ),
                                      Container(
                                        padding: EdgeInsets.all(12),
                                        child: Column(
                                          crossAxisAlignment: CrossAxisAlignment.start,
                                          children: [
                                            Text(Provider.of<ServiceModule>(context).banner()[i][U.langColumn(context, 'title')] != null && Provider.of<ServiceModule>(context).banner()[i][U.langColumn(context, 'title')] != '' ? Provider.of<ServiceModule>(context).banner()[i][U.langColumn(context, 'title')]:Provider.of<ServiceModule>(context).banner()[i]['titleEn']!=null?Provider.of<ServiceModule>(context).banner()[i]['titleEn']:Provider.of<ServiceModule>(context).banner()[i]['title'], style: TextStyle(color: textColor, fontWeight: FontWeight.w500), overflow: TextOverflow.ellipsis),
                                            SizedBox(height: 5),
                                            Linkify(
                                              text: Provider.of<ServiceModule>(context).banner()[i][U.langColumn(context, 'description')] != null && Provider.of<ServiceModule>(context).banner()[i][U.langColumn(context, 'description')] != '' ? Provider.of<ServiceModule>(context).banner()[i][U.langColumn(context, 'description')]:Provider.of<ServiceModule>(context).banner()[i]['descriptionEn']!=null?Provider.of<ServiceModule>(context).banner()[i]['descriptionEn']:Provider.of<ServiceModule>(context).banner()[i]['description'], style: TextStyle(color: textColor, fontSize: 14), maxLines: 2, overflow: TextOverflow.ellipsis,
                                              onOpen: (link) async {
                                                if (await canLaunchUrl(Uri.parse(link.url))) {
                                                  await launchUrl(Uri.parse(link.url));
                                                }
                                              },
                                            )
                                          ],
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.fromLTRB(12.0, 8.0, 8.0, 8.0),
                                        child: Row(
                                            mainAxisAlignment: MainAxisAlignment.center,
                                            children: List.generate(Provider.of<ServiceModule>(context).banner().length, (index) => Padding(
                                              padding: const EdgeInsets.only(right: 8.0),
                                              child: Container(
                                                width: index == i ? 16.0 : 8.0,
                                                height: 8.0,
                                                decoration: BoxDecoration(
                                                    borderRadius: BorderRadius.all(Radius.circular(8)),
                                                    color: primaryColor.withValues(alpha: index == i ? 1 : 0.3)
                                                ),
                                              ),
                                            ))
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                                onTap: ()=>navigateTo(context, MobBannerDetailPage(user: Provider.of<UserModule>(context, listen: false).user(), data: Provider.of<ServiceModule>(context, listen: false).banner()[i])).then((val){
                                  val = val??true;
                                  if(val) homeFunc.getFrequentlyRequested(context);
                                }),
                              ),
                            ): emptyWidget(left: 0)
                          ],
                        ),
                      ):Container(),

                      Provider.of<UserModule>(context).profile()['quickAction'] != null && Provider.of<UserModule>(context).profile()['quickAction']['show'] == true ? Container(
                        margin: EdgeInsets.only(top: 36, left: 16, right: 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(Provider.of<UserModule>(context).profile()['quickAction']['label'][_localeIndex]??'Not Set', style: TextStyle(color: textColor, fontSize: 17, fontWeight: FontWeight.w500)),
                            SizedBox(height: 12),
                            Provider.of<ServiceModule>(context).quickAct().length > 0 ? Container(
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  border: Border.all(color: textColor.withValues(alpha: 0.15)),
                                  borderRadius: BorderRadius.all(Radius.circular(12))
                              ),
                              child: Column(
                                children: List.generate(Provider.of<ServiceModule>(context).quickAct().length, (i){
                                  return GestureDetector(
                                    child: Container(
                                      padding: EdgeInsets.all(12),
                                      decoration: BoxDecoration(
                                          color: Colors.white,
                                          borderRadius: BorderRadius.only(
                                            topLeft: Radius.circular(i==0?12:0),
                                            topRight: Radius.circular(i==0?12:0),
                                            bottomLeft: Radius.circular(i==Provider.of<ServiceModule>(context).quickAct().length-1?12:0),
                                            bottomRight: Radius.circular(i==Provider.of<ServiceModule>(context).quickAct().length-1?12:0),
                                          )
                                      ),
                                      child: Row(
                                        children: [
                                          imageTiles(imageUrl: Provider.of<ServiceModule>(context).quickAct()[i]['_mobileImage'] ?? "null", width: 50, height: 40, radius: 5),
                                          SizedBox(width: 16),
                                          Expanded(
                                            child: Text(Provider.of<ServiceModule>(context).quickAct()[i][U.langColumn(context, 'subject')], style: TextStyle(color: textColor, fontWeight: FontWeight.w500), overflow: TextOverflow.ellipsis),
                                          ),
                                          U.iconsax('arrow-right-3', size: 14, color: textColor.withValues(alpha: 0.75)),
                                        ],
                                      ),
                                    ),
                                    onTap: ()=>navigateTo(context, MobReqCreatePage(user: Provider.of<UserModule>(context, listen: false).user(), request: Provider.of<ServiceModule>(context, listen: false).quickAct()[i])),
                                  );
                                }),
                              ),
                            ) : emptyWidget(left: 0)
                          ],
                        ),
                      ):Container(),
                      SizedBox(height: 16)
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    ) : Provider.of<UserModule>(context).resetData() ? RefreshPage(() {
      Provider.of<UserModule>(context, listen: false).setResetData(false);
      homeFunc.getProfileData(context);
    }) : _timeLimit ? showButton(context) : loadingTemplate(() {if(mounted) setState(()=>_timeLimit=true);},);
  }

  Widget emptyWidget({double left = 16}){
    return Padding(padding: EdgeInsets.only(left: left), child: Text("notAvailable".tr(), style: TextStyle(color: textColor.withValues(alpha: 0.5), fontSize: 14, fontWeight: FontWeight.w400)));
  }

  Widget dndStatus(){
    return Provider.of<UserModule>(context).user()['checkedIn'] && Provider.of<UserModule>(context).houseKeeping() && Provider.of<UserModule>(context).dndStatus()?GestureDetector(
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 16),
        decoration: BoxDecoration(
            color: Colors.red.withValues(alpha: 0.15),
            border: Border(bottom: BorderSide(color: Colors.red, width: 1.5))
        ),
        child: Row(
          children: [
            Expanded(child: Text('info_dnd'.tr(), style: TextStyle(color: textColor, fontSize: 14))),
            U.iconsax('arrow-down-1', color: textColor, size: 18)
          ],
        ),
      ),
      onTap: (){
        showModalBottomSheet(
          context: context,
          backgroundColor: Colors.transparent,
          builder: (context) => Container(
              padding: EdgeInsets.fromLTRB(15, 15, 15, 30),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25))
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    width: 40, height: 4, margin: EdgeInsets.only(bottom: 30),
                    decoration: BoxDecoration(color: Colors.black12, borderRadius: BorderRadius.all(Radius.circular(10))),
                  ),
                  Text('msg_dnd'.tr(), style: TextStyle(fontSize: 14, color: textColor), textAlign: TextAlign.center),
                ],
              )
          ),
        );
      },
    ):Container();
  }
}

//------------------------------------------------------------------------------

class MobMenuDisplayPage extends StatefulWidget {
  String scope;
  MobMenuDisplayPage({required this.scope, Key? key}) : super(key: key);

  @override
  State<MobMenuDisplayPage> createState() => _MobMenuDisplayPageState();
}

class _MobMenuDisplayPageState extends State<MobMenuDisplayPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: appBarTemplate(context: context, title: 'topMenu'.tr(), action: U.servantDisplay()?null:[
        Center(
          child: GestureDetector(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
              margin: EdgeInsets.only(right: 15),
              decoration: BoxDecoration(
                  color: primaryColor.withValues(alpha: 0.1),
                  borderRadius: BorderRadius.all(Radius.circular(50))
              ),
              child: Text('customize'.tr(), style: TextStyle(color: primaryColor, fontSize: 14)),
            ),
            onTap: (){
              navigateTo(context, MobMenuEditorPage(scope: widget.scope));
            },
          ),
        )
      ]),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.fromLTRB(16, 8, 16, 0),
            child: Column(
              children: List.generate((Provider.of<ServiceModule>(context).topMenu()!.length/4).ceil(), (i){
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: List.generate(4, (j){
                    int index = i==0?j:j+(4*i);
                    return index < Provider.of<ServiceModule>(context).topMenu()!.length ? GestureDetector(
                      child: Column(
                        children: [
                          i>0?SizedBox(height: 16):Container(),
                          categoryContainer(context: context, iconUrl: Provider.of<ServiceModule>(context).topMenu()![index]['iconUrl']),
                          SizedBox(height: 8),
                          SizedBox(
                            width: 70,
                            child: Text(U.servantDisplay() ? Provider.of<ServiceModule>(context).topMenu()![index]['description'] : Provider.of<ServiceModule>(context).topMenu()![index][U.langColumn(context, 'description')]??'', style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w300), maxLines: 2, overflow: TextOverflow.ellipsis, textAlign: TextAlign.center),
                          )
                        ],
                      ),
                      onTap: ()=>navigateTo(context, MobReqSelectPage(user: Provider.of<UserModule>(context, listen: false).user(), title: U.servantDisplay() ? Provider.of<ServiceModule>(context, listen: false).topMenu()![index]['description'] : Provider.of<ServiceModule>(context, listen: false).topMenu()![index][U.langColumn(context, 'description')]??'', scope: widget.scope, groupCode: Provider.of<ServiceModule>(context, listen: false).topMenu()![index]['code'])),
                    ) : Container(width: 70);
                  }),
                );
              }),
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(16, 36, 16, 16),
            child: Text('availableMenu'.tr(), style: TextStyle(color: textColor, fontSize: 17, fontWeight: FontWeight.w500)),
          ),
          Expanded(
            child: SingleChildScrollView(
              padding: EdgeInsets.fromLTRB(16, 5, 16, 16),
              child: SafeArea(
                child: Column(
                  children: List.generate((Provider.of<ServiceModule>(context).reqGroup()!.length/4).ceil(), (i){
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: List.generate(4, (j){
                        int index = i==0?j:j+(4*i);
                        return index < Provider.of<ServiceModule>(context).reqGroup()!.length ? GestureDetector(
                          child: Column(
                            children: [
                              i>0?SizedBox(height: 16):Container(),
                              categoryContainer(context: context, iconUrl: Provider.of<ServiceModule>(context).reqGroup()![index]['iconUrl']),
                              SizedBox(height: 8),
                              SizedBox(
                                width: 70,
                                child: Text(U.servantDisplay() ? Provider.of<ServiceModule>(context).reqGroup()![index]['description'] : Provider.of<ServiceModule>(context).reqGroup()![index][U.langColumn(context, 'description')], style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w300), maxLines: 2, overflow: TextOverflow.ellipsis, textAlign: TextAlign.center),
                              )
                            ],
                          ),
                          onTap: ()=>navigateTo(context, MobReqSelectPage(user: Provider.of<UserModule>(context, listen: false).user(), title: U.servantDisplay() ? Provider.of<ServiceModule>(context, listen: false).reqGroup()![index]['description'] : Provider.of<ServiceModule>(context, listen: false).reqGroup()![index][U.langColumn(context, 'description')], scope: widget.scope, groupCode: Provider.of<ServiceModule>(context, listen: false).reqGroup()![index]['code'])),
                        ) : Container(width: 70);
                      }),
                    );
                  }),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

//------------------------------------------------------------------------------

class MobMenuEditorPage extends StatefulWidget {
  String scope;
  MobMenuEditorPage({required this.scope, Key? key}) : super(key: key);

  @override
  State<MobMenuEditorPage> createState() => _MobMenuEditorPageState();
}

class _MobMenuEditorPageState extends State<MobMenuEditorPage> {
  List data = [];
  List available = [];

  @override
  void initState() {
    data.addAll(Provider.of<ServiceModule>(context, listen: false).topMenu()!);
    available.addAll(Provider.of<ServiceModule>(context, listen: false).reqGroup()!);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: appBarTemplate(context: context, title: 'topMenu'.tr(), action: [
        Center(
          child: GestureDetector(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
              margin: EdgeInsets.only(right: 15),
              child: Text('done'.tr(), style: TextStyle(color: primaryColor, fontSize: 14)),
              decoration: BoxDecoration(
                  color: primaryColor.withValues(alpha: 0.1),
                  borderRadius: BorderRadius.all(Radius.circular(50))
              ),
            ),
            onTap: ()async{
              if(data.isNotEmpty){
                List codes = [];
                data.forEach((element) {
                  codes.add(element['code']);
                });

                var res = await ApiAuthProvider().postData('/api/informants/topMenu/${widget.scope}', {'topMenu': codes.join(';')}, null, context);
                if(res != null){
                  Provider.of<ServiceModule>(context, listen: false).setTopMenu(data);
                  Provider.of<ServiceModule>(context, listen: false).setReqGroup(available);
                  navigateBack(context);
                  navigateBack(context);
                  navigateTo(context, MobMenuDisplayPage(scope: widget.scope));
                }
              } else if(available.isEmpty) {
                navigateBack(context);
              } else {
                showError(context, "selectAlert".tr());
              }
            },
          ),
        )
      ]),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            DragAndDropLists(
              disableScrolling: true,
              lastItemTargetHeight: 8,
              lastListTargetSize: 0,
              children: [
                DragAndDropList(
                  contentsWhenEmpty: Padding(
                    padding: const EdgeInsets.only(top: 16.0, bottom: 16.0),
                    child: Text("emptyMenuAlert".tr(), style: TextStyle(fontStyle: FontStyle.italic, color: primaryColor.withValues(alpha: 0.60)),),
                  ),
                  canDrag: false,
                  children: List<DragAndDropItem>.generate(data.length, (i){
                    return DragAndDropItem(
                      child: Container(
                        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                        child: Row(
                          children: [
                            categoryContainer(context: context, iconUrl: data[i]['iconUrl']),
                            SizedBox(width: 12),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(data[i][U.langColumn(context, 'description')], style: TextStyle(color: textColor, fontSize: 14), overflow: TextOverflow.ellipsis),
                                  SizedBox(height: 4),
                                  Text(data[i][U.langColumn(context, 'description')], style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w300), overflow: TextOverflow.ellipsis),
                                ],
                              ),
                            ),
                            GestureDetector(
                              child: U.iconsax('bold/minus-cirlce', color: Color(0xffD81010)),
                              onTap: (){
                                setState(() {
                                  available.add(data[i]);
                                  data.remove(data[i]);
                                });
                              },
                            ),
                            SizedBox(width: 40)
                          ],
                        ),
                      ),
                    );
                  }),
                )
              ],
              onItemReorder: (int oldItemIndex, int oldListIndex, int newItemIndex, int newListIndex) {
                setState(() {
                  var movedItem = data.removeAt(oldItemIndex);
                  data.insert(newItemIndex, movedItem);
                });
              },
              onListReorder: (int oldListIndex, int newListIndex) {},
              itemDragHandle: DragHandle(
                child: Padding(padding: EdgeInsets.only(right: 16), child: Icon(Icons.menu_rounded, color: textColor)),
              ),
            ),
            separator(),
            Container(
              margin: EdgeInsets.fromLTRB(16, 16, 16, 13),
              child: Text('availableMenu'.tr(), style: TextStyle(color: textColor, fontSize: 17, fontWeight: FontWeight.w500)),
            ),
            SafeArea(
              child: Column(
                children: List.generate(available.length, (i){
                  return Container(
                    padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                    child: Row(
                      children: [
                        categoryContainer(context: context, iconUrl: available[i]['iconUrl']),
                        SizedBox(width: 12),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(available[i][U.langColumn(context, 'description')], style: TextStyle(color: textColor, fontSize: 14), overflow: TextOverflow.ellipsis),
                              SizedBox(height: 4),
                              Text(available[i][U.langColumn(context, 'description')], style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w300), overflow: TextOverflow.ellipsis),
                            ],
                          ),
                        ),
                        GestureDetector(
                          child: U.iconsax('bold/add-circle', color: Color(0xffD81010)),
                          onTap: (){
                            if(data.length < 7){
                              setState(() {
                                data.add(available[i]);
                                available.remove(available[i]);
                              });
                            }
                            else{
                              showError(context, 'maxMenu'.tr());
                            }
                          },
                        ),
                      ],
                    ),
                  );
                }),
              ),
            ),
            SizedBox(height: 8),
          ],
        ),
      ),
    );
  }
}