import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:provider/provider.dart';
import 'package:telnow_mobile_new/src/layouts/functions/detail.dart';
import 'package:telnow_mobile_new/src/layouts/components/template.dart';
import 'package:telnow_mobile_new/src/layouts/web/history_forum.dart';
import 'package:telnow_mobile_new/src/utils/U.dart';
import 'package:telnow_mobile_new/src/utils/extensions.dart';
import 'package:telnow_mobile_new/src/utils/provider.dart';
import 'package:timelines_plus/timelines_plus.dart';
import 'package:url_launcher/url_launcher.dart';

import '../mobile/pickup_asset.dart';

class WebHistoryDetailPage extends StatefulWidget {
  final int index;
  final String locale;
  const WebHistoryDetailPage({required this.index, super.key, required this.locale});

  @override
  State<WebHistoryDetailPage> createState() => _WebHistoryDetailPageState();
}

class _WebHistoryDetailPageState extends State<WebHistoryDetailPage> {
  final DetailFunction detFunc = DetailFunction();

  TextEditingController controllerNote = new TextEditingController()..text = '';
  Map<String, dynamic> list = {};
  Map<String, dynamic> user = {};
  Map<String, dynamic> asset = {};

  var rating = [
    {'key': 1, 'image': "assets/image/icon/very_dissatisfied.png", 'label': 'disatisfied'.tr()},
    {'key': 2, 'image': "assets/image/icon/dissatisfied.png", 'label': 'lessSatisfied'.tr()},
    {'key': 3, 'image': "assets/image/icon/neutral.png", 'label': 'satisfied'.tr()},
    {'key': 4, 'image': "assets/image/icon/satisfied.png", 'label': 'verySatisfied'.tr()},
    {'key': 5, 'image': "assets/image/icon/very_satisfied.png", 'label': 'reallyPleased'.tr()},
  ];
  bool _timeLimit = false;
  bool isActiveMission = false;

  @override
  void initState() {
    getData();
    // TODO: implement initState
    super.initState();
  }

  getData() async{
    String ticketNo = Provider.of<HistoryModule>(context, listen: false).dataRequests()[widget.index]['ticketNo'];
    var res = await detFunc.getMission(widget.locale, ticketNo);
    var baseUrl = await detFunc.getBaseUrl();
    var mobileImage = '';

    user = res['user'];
    list = res['list'];

    if (list['_asset'] != null && list['_asset']['image'] != null){
      mobileImage = baseUrl + list['_asset']['image'];
    }

    if (list['_asset'] != null){
      asset['name'] = list['_asset']['name'];
      asset['description'] = list['_asset']['description'];
      asset['_mobileImage'] = mobileImage;
    }

    isActiveMission = list['currentState'] == 'DIPROSES' ||
        list['currentState'] == 'DIANTRIKAN' ||
        list['currentState'] == 'DIMULAI' ||
        list['currentState'] == 'DISELESAIKAN';

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: PreferredSize(preferredSize: Size.fromHeight(0), child: AppBar(elevation: 0, backgroundColor: primaryColor)),
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(vertical: 25, horizontal: 100),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('detail'.tr(), style: TextStyle(color: textColor, fontSize: 17, fontWeight: FontWeight.w500), overflow: TextOverflow.ellipsis),
                GestureDetector(
                  child: Text('buttonBack'.tr(), style: TextStyle(color: primaryColor, fontSize: 14)),
                  onTap: ()=>navigateBack(context),
                ).withHover(),
              ],
            ),
          ),
          divider(),
          Expanded(
            child: SingleChildScrollView(
              padding: EdgeInsets.symmetric(vertical: 25, horizontal: 100),
              child: list.isNotEmpty ? Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(list[U.langColumn(context, 'requestGroupDescription')], style: TextStyle(color: textColor, fontSize: 16, fontWeight: FontWeight.w600)),
                      list['currentState'] != 'DIPROSES' && list['currentState'] != 'DIANTRIKAN' && !list['autoResponse'] ? GestureDetector(
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                          decoration: BoxDecoration(color: primaryColor.withValues(alpha: 0.1), border: Border.all(color: primaryColor), borderRadius: BorderRadius.all(Radius.circular(50))),
                          child: Row(
                            children: [
                              Text('forum'.tr(), style: TextStyle(color: primaryColor, fontSize: 14)),
                              SizedBox(width: 5),
                              U.iconsax('messages-3', color: primaryColor, size: 20)
                            ],
                          ),
                        ),
                        onTap: (){
                          Provider.of<HistoryModule>(context, listen: false).setForumFalse(widget.index);
                          navigateTo(context, WebHistoryForumPage(data: list, user: user));
                        },
                      ).withHover() : Container()
                    ],
                  ),
                  SizedBox(height: 20),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Container(
                          padding: EdgeInsets.all(20),
                          decoration: BoxDecoration(color: Colors.white, border: Border.all(color: textColor.withValues(alpha: 0.15)), borderRadius: BorderRadius.all(Radius.circular(12))),
                          child: Column(
                            spacing: 16,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              requestTiles(image: list['_requestImage'] ?? "null", title: list[U.langColumn(context, 'requestSubject')], subtitle: list[U.langColumn(context, '_subjectDescription')]??'', border: true, vertical: 0),
                              // SizedBox(height: 16),
                              textHorizontal('ticketNumber'.tr(), list['ticketNo'], copy: true),
                              // SizedBox(height: 16),
                              if(list['receptionistId'] != null) renderRequested(),
                              textHorizontal('location'.tr(), list['ipphoneExtLocation']),
                              // SizedBox(height: 16),
                              divider(opacity: 0.05),
                              // SizedBox(height: 16),

                              list['autoResponse'] ? Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text('note'.tr(), style: TextStyle(color: textColor)),
                                  SizedBox(height: 5),
                                  if(list['responseText'] != null && list['responseText'] != '') Linkify(
                                    text: list['responseText'], style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w300),
                                    onOpen: (link) async {
                                      if (await canLaunchUrl(Uri.parse(link.url))) {
                                        await launchUrl(Uri.parse(link.url));
                                      }
                                    },
                                  ),

                                  list['responseAttachment']!=null&&list['responseAttachment']!=''?list['_isPdf']?GestureDetector(
                                      child: Container(
                                          width: double.infinity,
                                          margin: EdgeInsets.only(top: 8),
                                          decoration: BoxDecoration(border: Border.all(color: Colors.deepOrange), borderRadius: BorderRadius.all(Radius.circular(12))),
                                          child: Center(
                                            child: Column(
                                              children: [
                                                Icon(Icons.picture_as_pdf, color: Colors.deepOrange, size: 50),
                                                Text('seeAttachment'.tr(), style: TextStyle(color: Colors.black45, fontSize: 12))
                                              ],
                                            ),
                                          )
                                      ),
                                      onTap: () => detFunc.openAttachment(list)
                                  ).withHover() : GestureDetector(
                                      child: LayoutBuilder(
                                        builder: (context, constraints) {
                                          return Image.network(list['_mobileResponseAttachment'], fit: BoxFit.cover, width: double.infinity, height: constraints.maxWidth/(1.7), loadingBuilder:(BuildContext? context, Widget? child,ImageChunkEvent? loadingProgress) {
                                            if (loadingProgress == null) return child!;
                                            return Container(
                                              height: constraints.maxWidth/(1.7),
                                              child: Center(
                                                child: CircularProgressIndicator(
                                                  value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null,
                                                ),
                                              ),
                                            );
                                          });
                                        },
                                      ),
                                      onTap: ()=>navigateTo(context, PhotoPreview('image'.tr(), list['_mobileResponseAttachment'], true))
                                  ).withHover() : Container()
                                ],
                              ) : attachment_new(list),

                              // list['autoResponse'] ? Container() : SizedBox(height: 16),
                              list['autoResponse'] ? Container() : textVertical('note'.tr(), list['requestNote']!=''?list['requestNote']:'-'),
                              // list['autoResponse'] ? Container() : SizedBox(height: 16),
                              list['autoResponse'] || list['datetimeScheduled'] == null || list['datetimeScheduled'] == '' ? Container() : Text("${"scheduleMessage".tr()} ${list['datetimeScheduled']}."),

                              list['_parentTicket'] != null ? Column(
                                spacing: 16,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(height: 16),
                                  divider(opacity: 0.05),
                                  // SizedBox(height: 16),
                                  Text('requestReference'.tr(), style: TextStyle(color: textColor, fontWeight: FontWeight.w600)),
                                  // SizedBox(height: 16),
                                  textHorizontal('ticketNumber'.tr(), list['_parentTicket']['ticketNo']),
                                  // SizedBox(height: 16),
                                  divider(opacity: 0.05),
                                  // SizedBox(height: 16),
                                  textHorizontal('subject'.tr(), list['_parentTicket'][U.langColumn(context, 'requestSubject')]),
                                  // SizedBox(height: 16),
                                  textHorizontal('note'.tr(), list['_parentTicket']['requestNote']!=null && list['_parentTicket']['requestNote']!=''?list['_parentTicket']['requestNote']:'-'),
                                  // SizedBox(height: 16),
                                  divider(opacity: 0.05),
                                  // SizedBox(height: 16),
                                  list['_parentTicket']['_activeHoldRequest'] != null ? Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text('state'.tr(), style: TextStyle(fontSize: 14, color: textColor)),
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.end,
                                        children: [
                                          Image(image: AssetImage('assets/image/general/Watch.png'), width: 20, height: 20),
                                          SizedBox(width: 5),
                                          Text('hold'.tr(), style: TextStyle(fontSize: 14, color: primaryColor)),
                                        ],
                                      )
                                    ],
                                  ) : textHorizontal('state'.tr(), U.renderStatus(list['_parentTicket']['currentState'])),
                                  // SizedBox(height: 16),
                                  textHorizontal('description'.tr(), list['_parentTicket'][U.langColumn(context, '_subjectDescription')]??''),
                                  // SizedBox(height: 16),
                                ],
                              ) : Container()
                            ],
                          ),
                        ),
                      ),
                      SizedBox(width: 30),
                      Expanded(
                        child: Container(
                          padding: EdgeInsets.all(20),
                          decoration: BoxDecoration(color: Colors.white, border: Border.all(color: textColor.withValues(alpha: 0.15)), borderRadius: BorderRadius.all(Radius.circular(12))),
                          child: list['autoResponse'] ? Container() : Column(
                            spacing: 16,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              asset.isEmpty ? !isActiveMission ? SizedBox() : Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Column(
                                    spacing: 6,
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text('asset'.tr(), style: TextStyle(color: textColor, fontWeight: FontWeight.w600),),
                                      Text('noAssetAdded'.tr(), style: TextStyle(fontSize: 12),)
                                    ],
                                  ),
                                  ElevatedButton.icon(
                                    style: ElevatedButton.styleFrom(
                                      backgroundColor: primaryColor,
                                      foregroundColor: Colors.white,
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(24),
                                      ),
                                      elevation: 0.0,
                                      alignment: Alignment.center,
                                    ),
                                    onPressed: () async{
                                      final assetPicked = await Navigator.push(
                                        context, MaterialPageRoute(
                                        builder: (_) => BlocProvider(
                                          create: (_) => AssetCubit()..getData(),
                                          child: PickupAsset(web: true),
                                        ),),
                                      );

                                      if (assetPicked != null) {
                                        var data = {'assetCode': assetPicked[0]['code']};
                                        var res = await detFunc.setAsset(list['ticketNo'], data);
                                        if(res != null){
                                          setState(() {
                                            for (var item in assetPicked) {
                                              asset['_mobileImage'] = item['_mobileImage']+'?bridge-cache=true';
                                              asset['name'] = item['name'];
                                              asset['description'] = item['description'];
                                            }
                                          });
                                        }
                                      }
                                    },
                                    icon: Icon(Icons.add, size: 18,),
                                    label: Text('addLabel'.tr(),),
                                  ),
                                ],
                              ) : Column(
                                spacing: 6,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text('asset'.tr(), style: TextStyle(color: textColor, fontWeight: FontWeight.w600,),),
                                  Container(
                                    decoration: BoxDecoration(
                                      border: Border.all(color: Color(0xff262626).withValues(alpha: 0.1)),
                                      borderRadius: BorderRadius.circular(12),
                                    ),
                                    child: Padding(
                                      padding: EdgeInsets.symmetric(vertical: 0),
                                      child: Row(
                                        spacing: 12,
                                        children: [
                                          ClipRRect(
                                            borderRadius: BorderRadius.circular(12.0),
                                            child: Image.network(
                                              asset['_mobileImage'],
                                              width: 80,
                                              height: 64,
                                              fit: BoxFit.cover,
                                              errorBuilder: (context, error, stackTrace) =>
                                              const Icon(Icons.broken_image, size: 60, color: Colors.grey),
                                              loadingBuilder: (context, child, loadingProgress) {
                                                if (loadingProgress == null) return child;
                                                return const SizedBox(
                                                  width: 80,
                                                  height: 64,
                                                  child: Center(child: CupertinoActivityIndicator()),
                                                );
                                              },
                                            ),
                                          ),
                                          Expanded(
                                            child: Column(
                                              crossAxisAlignment: CrossAxisAlignment.start,
                                              spacing: 4,
                                              children: [
                                                Text(asset['name'],
                                                  maxLines: 1,
                                                  overflow: TextOverflow.ellipsis,
                                                  style: TextStyle(
                                                    color: textColor,
                                                    fontSize: 14,
                                                    fontWeight: FontWeight.w600,
                                                  ),),
                                                Text(asset['description'],
                                                    maxLines: 2,
                                                    overflow: TextOverflow.ellipsis,
                                                    style: TextStyle(color: textColor, fontSize: 14)),
                                              ],
                                            ),
                                          ),
                                          GestureDetector(
                                            onTap: () async {
                                              var data = {'assetCode': null};
                                              var res = await detFunc.setAsset(list['ticketNo'], data);
                                              if(res != null) {
                                                setState(() {
                                                  asset = {};
                                                });
                                              }
                                            },
                                            child: Padding(
                                              padding: const EdgeInsets.all(12.0),
                                              child: Icon(Icons.delete_rounded, size: 24, color: Colors.red.withValues(alpha: 0.85),),
                                            ),
                                          ).withHover()
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              if(asset.isNotEmpty) divider(opacity: 0.05),
                              Text('activity'.tr(), style: TextStyle(color: textColor, fontWeight: FontWeight.w600)),
                              // SizedBox(height: 16),
                              list['currentState'] != 'DIBATALKAN' && list['currentState'] != 'DIANTRIKAN' && list['currentState'] != 'DIPROSES' && list['_collaboratorDataFilter'].length > 0?Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text('servant'.tr(), style: TextStyle(color: textColor, fontSize: 14)),
                                  Container(
                                    padding: EdgeInsets.only(top: 10, left: 16),
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text('1. ${list['servantNameStart']??'-'}', style: TextStyle(color: textColor, fontSize: 14), overflow: TextOverflow.ellipsis),
                                        Column(
                                          crossAxisAlignment: CrossAxisAlignment.start,
                                          children: List.generate(list['_collaboratorDataFilter'].length, (i) {
                                            return Text('${i+2}. ${list['_collaboratorDataFilter'][i]['name']}', style: TextStyle(color: textColor, fontSize: 14), overflow: TextOverflow.ellipsis);
                                          }),
                                        )
                                      ],
                                    ),
                                  )
                                ],
                              ) : textHorizontal(
                                  list['currentState'] == 'DIBATALKAN'?'canceledBy'.tr():'servant'.tr(),
                                  list['currentState'] == 'DIBATALKAN'?list['servantNameCancel']??'-':list['currentState'] != 'DIANTRIKAN' && list['currentState'] != 'DIPROSES'?list['servantNameStart']??'-':'-'
                              ),
                              // SizedBox(height: 16),
                              divider(opacity: 0.05),
                              // SizedBox(height: 16),
                              Text('timeline'.tr(), style: TextStyle(color: textColor, fontSize: 14)),
                              // SizedBox(height: 16),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  timeline('stateRequested'.tr(), list['datetimeRequest'] != null ? convertDate(list['datetimeRequest'], context.locale.toString()) : '-', null, null, current: list['currentState'] == 'DIANTRIKAN' || list['currentState'] == 'DIPROSES', first: true),
                                  list['currentState'] == 'DIMULAI' ? timeline('stateDone'.tr(), list['datetimeStart'] != null ? convertDate(list['datetimeStart'], context.locale.toString()) : '-', list['noteStart'], list['noteStartTranslate'], current: list['currentState'] == 'DIMULAI') : Container(),
                                  !list['autoResponse'] && (list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS') ? timeline('startDoing'.tr(), list['datetimeStart'] != null ? convertDate(list['datetimeStart'], context.locale.toString()) : '-', list['noteStart'], list['noteStartTranslate']) : Container(),
                                  !list['autoResponse'] && (list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS') ? timeline('stateFinish'.tr(), list['datetimeFinish'] != null ? convertDate(list['datetimeFinish'], context.locale.toString()) : '-', list['noteFinish'], list['noteFinishTranslate'], current: list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS') : Container(),
                                  list['autoResponse'] && list['currentState'] == 'TUNTAS' ? timeline('stateFinish'.tr(), list['datetimeComplete'] != null ? convertDate(list['datetimeComplete'], context.locale.toString()) : '-', list['noteComplete'], list['noteCompleteTranslate'], current: list['currentState'] == 'TUNTAS') : Container(),
                                  list['currentState'] == 'DIBATALKAN' ? timeline('stateCanceled'.tr(), list['datetimeCancel'] != null ? convertDate(list['datetimeCancel'], context.locale.toString()) : '-', list['noteCancel'], list['noteCancelTranslate'], current: list['currentState'] == 'DIBATALKAN') : Container(),
                                ],
                              ),

                              suspendPanel(list),
                              finish_att_new(list),

                              !list['autoResponse'] && (list['currentState'] == 'TUNTAS' || list['currentState'] == 'DISELESAIKAN') ? Column(
                                spacing: 16,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  // SizedBox(height: 16),
                                  divider(opacity: 0.05),
                                  list['action'] != null && list['action'] != '' ? Column(
                                    children: [
                                      // SizedBox(height: 16),
                                      textHorizontal('action'.tr(), list['action'])
                                    ],
                                  ) : Container(),
                                  // SizedBox(height: 16),
                                  Row(
                                    children: [
                                      Text('rate'.tr(), style: TextStyle(color: textColor.withValues(alpha: 0.75), fontSize: 14)),
                                      Expanded(
                                        child: list['satisfactionRate'] > 0 ? Row(
                                          mainAxisAlignment: MainAxisAlignment.end,
                                          children: [
                                            Text(rating[list['satisfactionRate']-1]['label'].toString(), style: TextStyle(color: textColor, fontSize: 14), overflow: TextOverflow.ellipsis),
                                            SizedBox(width: 5),
                                            Image(image: AssetImage(rating[list['satisfactionRate']-1]['image'].toString()), width: 25),
                                          ],
                                        ) : Text('unrated'.tr(), style: TextStyle(color: textColor, fontSize: 14), textAlign: TextAlign.end, overflow: TextOverflow.ellipsis),
                                      ),
                                    ],
                                  ),
                                  list['satisfactionRate'] > 0 ? Builder(
                                    builder: (context) {
                                      var aspect = '';
                                      if(context.locale.toString() == 'id' && list['ratingAspectId'] != null){
                                        aspect = list['ratingAspectId'];
                                      } else if(context.locale.toString() == 'en' && list['ratingAspectEn'] != null){
                                        aspect = list['ratingAspectEn'];
                                      } else if(list['ratingAspectOri'] != null){
                                        aspect = list['ratingAspectOri'];
                                      }

                                      return aspect.isNotEmpty ? Column(
                                        children: [
                                          // SizedBox(height: 16),
                                          textHorizontal('ratingAspect'.tr(), aspect)
                                        ],
                                      ) : Container();
                                    },
                                  ) : Container(),
                                ],
                              ) : Container()
                            ],
                          ),
                        ),
                      )
                    ],
                  )
                ],
              ) : _timeLimit ? showButton(context) : loadingTemplate(() {if(mounted) setState(()=>_timeLimit=true);},),
            ),
          ),
          list.isEmpty || list['autoResponse'] || list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS' || list['currentState'] == 'DIBATALKAN' ? Container() : Container(
            margin: EdgeInsets.symmetric(horizontal: 100),
            padding: EdgeInsets.symmetric(vertical: 25),
            decoration: BoxDecoration(border: Border(top: BorderSide(color: textColor.withValues(alpha: 0.05)))),
            child: list['currentState'] == 'DIMULAI' && list['_canNotCancel'] ? Text('canNotCancel2'.tr(), style: TextStyle(color: textColor, fontSize: 14), textAlign: TextAlign.center) : Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: SizedBox(
                    width: double.infinity,
                    child: TextField(
                      controller: controllerNote,
                      style: const TextStyle(fontSize: 14, color: Colors.black),
                      maxLength: 128,
                      decoration: InputDecoration(
                          counterText: '',
                          counterStyle: TextStyle(color: Colors.transparent, fontSize: 0),
                          hintText: 'addNoteCancel'.tr(),
                          hintStyle: TextStyle(color: textColor.withValues(alpha: 0.5), fontSize: 14),
                          filled: true,
                          fillColor: backgroundColor,
                          hoverColor: Colors.black.withValues(alpha: 0.1),
                          contentPadding: EdgeInsets.symmetric(vertical: 17, horizontal: 20),
                          prefixIcon: Padding(padding: EdgeInsets.only(left: 20, right: 20), child: U.iconsax('edit-2', color: textColor, size: 24)),
                          border: InputBorder.none,
                          enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: Color(0xff262626).withValues(alpha: 0.5))),
                          focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: primaryColor)),
                          isDense: true
                      ),
                    ),
                  ),
                ),
                SizedBox(width: 30),
                buttonTemplate(text: 'buttonCancel'.tr(), width: 200, height: 45, backgroundColor: textColor.withValues(alpha: 0.1), textColor: textColor.withValues(alpha: 0.75), borderColor: textColor.withValues(alpha: 0.20), action: () => detFunc.cancelRequest(context, list, controllerNote))
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget renderRequested(){
    if(list['receptionistId'] != null){
      if(user['roomAttendant'] != null && user['roomAttendant'] && user['userId'] != list['informantUserId'] && user['userId'] == list['receptionistId']){
        return Column(
          children: [
            textHorizontal('requestedFor'.tr(), list['informantName']??'-'),
            SizedBox(height: 16),
          ],
        );
      }

      if(user['userId'] == list['informantUserId'] && user['userId'] != list['receptionistId']){
        return Column(
          children: [
            textHorizontal('requestedBy'.tr(), list['receptionistName']??'-'),
            SizedBox(height: 16),
          ],
        );
      }
    }

    return SizedBox();
  }

  Widget attachment_new(list){
    List imageList = [];
    if(list['_attachment'] != null){
      for(var i = 1; i <= 5; i++){
        if(list['_attachment']['_mobileRequestAtt$i'] != null){
          imageList.add({'thumb': list['_attachment']['_mobileRequestThumb$i'], 'image': list['_attachment']['_mobileRequestAtt$i']});
        }
      }
    }

    return imageList.length > 0 ? Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('image'.tr(), style: TextStyle(color: textColor)),
        SizedBox(height: 5),
        LayoutBuilder(
          builder: (context, constraints) {
            var imageWidth = ((constraints.maxWidth-32)/5)-5;
            return Row(
              children: List.generate(imageList.length, (i){
                return GestureDetector(
                    child: Container(
                      width: imageWidth, height: imageWidth, alignment: Alignment.topRight,
                      margin: EdgeInsets.only(right: i == 4 ? 0 : 6),
                      decoration: BoxDecoration(
                          color: Colors.black12, borderRadius: BorderRadius.all(Radius.circular(5)), border: Border.all(color: Colors.black26, width: 0.5),
                          image: imageList[i]['thumb'] != null ? DecorationImage(image: NetworkImage(imageList[i]['thumb']), fit: BoxFit.cover) : DecorationImage(image: AssetImage('assets/image/error/ImageNotFound.png'), fit: BoxFit.cover)
                      ),
                    ),
                    onTap: ()=>navigateTo(context, PhotoPreviewGallery(title: 'image'.tr(), imageList: imageList, startIndex: i))
                ).withHover();
              }),
            );
          },
        )
      ],
    ) : textVertical('image'.tr(), 'noImgAttach'.tr());
  }

  Widget finish_att_new(list){
    List imageList = [];

    if((list['currentState'] == 'DISELESAIKAN' || list['currentState'] == 'TUNTAS')){
      if(list['_attachment'] != null){
        for(var i = 1; i <= 5; i++){
          if(list['_attachment']['_mobileFinishAtt$i'] != null){
            imageList.add({'thumb': list['_attachment']['_mobileFinishThumb$i'], 'image': list['_attachment']['_mobileFinishAtt$i']});
          }
        }
      }
    }

    return imageList.isNotEmpty ? Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(height: 16),
        Text('finishAttachment'.tr(), style: TextStyle(color: textColor)),
        SizedBox(height: 8),
        LayoutBuilder(
          builder: (context, constraints) {
            var imageWidth = ((constraints.maxWidth-32)/5)-5;
            return Row(
              children: List.generate(imageList.length, (i){
                return GestureDetector(
                    child: Container(
                      width: imageWidth, height: imageWidth, alignment: Alignment.topRight,
                      margin: EdgeInsets.only(right: i == 4 ? 0 : 6),
                      decoration: BoxDecoration(
                          color: Colors.black12, borderRadius: BorderRadius.all(Radius.circular(5)), border: Border.all(color: Colors.black26, width: 0.5),
                          image: imageList[i]['thumb'] != null ? DecorationImage(image: NetworkImage(imageList[i]['thumb']), fit: BoxFit.cover) : DecorationImage(image: AssetImage('assets/image/error/ImageNotFound.png'), fit: BoxFit.cover)
                      ),
                    ),
                    onTap: ()=>navigateTo(context, PhotoPreviewGallery(title: 'finishAttachment'.tr(), imageList: imageList, startIndex: i))
                ).withHover();
              }),
            );
          },
        )
      ],
    ) : Container();
  }

  Widget suspendPanel(list){
    var activeHold = list['_activeHoldRequest'];
    var requestHold = list['_holdRequest'];

    return Column(
      children: [
        activeHold != null ? Padding(padding: EdgeInsets.symmetric(vertical: 15), child: divider(opacity: 0.05)) : Container(),
        activeHold != null ? Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('state'.tr(), style: TextStyle(fontSize: 14, color: textColor)),
                Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Image(image: AssetImage('assets/image/general/Watch.png'), width: 20, height: 20),
                      SizedBox(width: 5),
                      Text('hold'.tr(), style: TextStyle(fontSize: 14, color: primaryColor)),
                    ],
                  ),
                )
              ],
            ),
            SizedBox(height: 16),
            textHorizontal('description'.tr(), activeHold['description'])
          ],
        ) : Container(),

        requestHold == null || requestHold.length == 0 || (requestHold.length == 1 && requestHold[0]['datetimeEnd'] == null) ? Container() : Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(padding: EdgeInsets.symmetric(vertical: 15), child: divider(opacity: 0.05)),
            Text('holdHistory'.tr(), style: TextStyle(fontSize: 14, color: Colors.black)),
            SizedBox(height: 5),
            Column(
              children: List.generate(requestHold.length, (i) {
                return requestHold[i]['datetimeEnd'] != null ? Container(
                  padding: EdgeInsets.symmetric(vertical: 5),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('${i+1}.', style: TextStyle(fontSize: 14, color: Colors.black)),
                      SizedBox(width: 5),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(requestHold[i]['description'], style: TextStyle(fontSize: 14, color: Colors.black), textAlign: TextAlign.start),
                            SizedBox(height: 3),
                            Text('${DateFormat('dd MMM yyyy, HH:mm', context.locale.toString()).format(DateTime.parse(requestHold[i]['datetimeStart']))} - ${DateFormat('dd MMM yyyy, HH:mm', context.locale.toString()).format(DateTime.parse(requestHold[i]['datetimeEnd']))}', style: TextStyle(fontSize: 14, color: primaryColor))
                          ],
                        ),
                      )
                    ],
                  ),
                ) : Container();
              }),
            )
          ],
        )
      ],
    );
  }

  Widget timeline(label, text, note, noteTranslate, {bool first = false, bool current = false}) {
    return TimelineTile(
      nodeAlign: TimelineNodeAlign.start,
      contents: Container(
        margin: EdgeInsets.fromLTRB(16, 10, 16, 10),
        child: Row(
          children: [
            Text(label, style: TextStyle(fontSize: 14, color: textColor.withValues(alpha: 0.85))),
            SizedBox(width: 5),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(text, style: TextStyle(fontSize: 13, color: textColor)),
                  note != null && note != '' ? Text(note, style: TextStyle(fontSize: 12, color: primaryColor), textAlign: TextAlign.right) : Container(),
                  U.autoTranslate() && noteTranslate != null && noteTranslate != '' && note != noteTranslate ? Container(
                    margin: EdgeInsets.only(top: 1), decoration: BoxDecoration(border: Border(top: BorderSide(color: primaryColor.withValues(alpha: 0.3)))),
                    child: Text('($noteTranslate)', style: TextStyle(fontSize: 12, color: primaryColor.withValues(alpha: 0.7), fontStyle: FontStyle.italic), textAlign: TextAlign.right),
                  ) : Container(),
                ],
              ),
            ),
          ],
        ),
      ),
      node: TimelineNode(
        indicator: DotIndicator(color: current ? primaryColor : Color(0xffE8E8E8)),
        startConnector: SolidLineConnector(color: first ? Colors.transparent : Color(0xffE8E8E8)),
        endConnector: SolidLineConnector(color: current ? Colors.transparent : Color(0xffE8E8E8)),
      ),
    );
  }
}
