venue_detail_screen.dart

import 'dart:async';
import 'package:ayo_indonesia_mobile_apps/components/loading_dialog_widget.dart';
import 'package:ayo_indonesia_mobile_apps/components/default_profile/default_profile.dart';
import 'package:ayo_indonesia_mobile_apps/configs/shared_prefence_manager.dart';
import 'package:ayo_indonesia_mobile_apps/constants/injector.dart';
import 'package:ayo_indonesia_mobile_apps/models/membership/venue_membership_list.dart';
import 'package:ayo_indonesia_mobile_apps/models/main_response_api/main_response_api.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/venue_field_list.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/venue_list.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/venue_coach.dart';
import 'package:ayo_indonesia_mobile_apps/new_components/avatar/rounded_user_avatar.dart';
import 'package:ayo_indonesia_mobile_apps/new_components/avatar/rounded_team_avatar.dart';
import 'package:ayo_indonesia_mobile_apps/repositories/venue/venue_membership_repository.dart';
import 'package:ayo_indonesia_mobile_apps/repositories/venue/venue_cart_repository.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/checkout/membership/schedule/choose_schedule_bundling_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/checkout/membership/schedule/choose_schedule_recurring_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/event/open_play/detail/open_play_detail_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/event/sparring/detail/sparring_detail_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/event/sparring/detail/sparring_individual_detail_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/venue_list_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/team_profile/team_profile.dart';
import 'package:ayo_indonesia_mobile_apps/screens/profile/profile_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/detail/about_venue_screen.dart';
import 'package:ayo_indonesia_mobile_apps/components/report_block_bottom.dart';
import 'package:ayo_indonesia_mobile_apps/components/rating_detail_modal_bottom.dart';
import 'package:ayo_indonesia_mobile_apps/components/bottomsheet/event/sport_selector_modal.dart';
import 'package:ayo_indonesia_mobile_apps/components/bottomsheet/event/sport_selector_venue_detail_modal.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
import 'package:ayo_indonesia_mobile_apps/lang/app_locale.dart';
import 'package:dio/dio.dart';
import 'package:dotted_line/dotted_line.dart';
import 'package:assorted_layout_widgets/assorted_layout_widgets.dart';
import 'package:clipboard/clipboard.dart';
////import 'package:facebook_app_events/facebook_app_events.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:intl/intl.dart';
import 'package:latlong2/latlong.dart' as DLatLng;
import 'package:url_launcher/url_launcher.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
import 'package:timeago/timeago.dart' as timeago;
import 'package:scroll_to_index/scroll_to_index.dart';

import 'package:ayo_indonesia_mobile_apps/blocs/venue/cancel_policy/cancel_policy_bloc.dart';
import 'package:ayo_indonesia_mobile_apps/blocs/venue/detail/venue_detail_bloc.dart';
import 'package:ayo_indonesia_mobile_apps/blocs/category/category_bloc.dart';
import 'package:ayo_indonesia_mobile_apps/blocs/category/category_event.dart';
import 'package:ayo_indonesia_mobile_apps/blocs/category/category_state.dart';
import 'package:ayo_indonesia_mobile_apps/blocs/venue/favorite/venue_favorite_bloc.dart';
import 'package:ayo_indonesia_mobile_apps/components/calendar/ayo_custom_datepicker.dart';
import 'package:ayo_indonesia_mobile_apps/components/custom_flutter_toast.dart';
import 'package:ayo_indonesia_mobile_apps/components/custom_flutter_toast_navigator.dart';
import 'package:ayo_indonesia_mobile_apps/components/custom_flutter_toast_without_close.dart';
import 'package:ayo_indonesia_mobile_apps/components/custom_wrapper.dart';
import 'package:ayo_indonesia_mobile_apps/components/dash_line.dart';
import 'package:ayo_indonesia_mobile_apps/components/share/general_share_modal.dart';
import 'package:ayo_indonesia_mobile_apps/components/skeleton.dart';
import 'package:ayo_indonesia_mobile_apps/configs/base_url_config.dart';
import 'package:ayo_indonesia_mobile_apps/constants/color.dart';
import 'package:ayo_indonesia_mobile_apps/constants/text_font_const.dart';
import 'package:ayo_indonesia_mobile_apps/constants/venue_booking_constant.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/cancel_policy/venue_cancel_policy.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/highlight_review_venue.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/other_venue_list.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/sport.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/venue_detail.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/venue_voucher.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/venue_event_new.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/venue_community.dart';
import 'package:ayo_indonesia_mobile_apps/models/category/category.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/venue_cart.dart';
import 'package:ayo_indonesia_mobile_apps/models/venue/venue_review_list.dart';
import 'package:ayo_indonesia_mobile_apps/models/community/community_venue_review.dart';
import 'package:ayo_indonesia_mobile_apps/repositories/venue/venue_repository.dart';
import 'package:ayo_indonesia_mobile_apps/repositories/venue/venue_voucher_repository.dart';
import 'package:ayo_indonesia_mobile_apps/repositories/category/category_repository.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/checkout/voucher/venue_voucher_list_content.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/detail/components/image_banner_slider.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/detail/components/other_venue_card.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/detail/review/venue_review_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/detail/venue_option_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/home/schedule/new_choose_schedule_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/activity/venue_activity_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/community/venue_community_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/checkout/review_order_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/favorite/venue_favorite_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/team_profile/review_open_play/review_open_play_screen.dart';
import 'package:ayo_indonesia_mobile_apps/utilities/dynamic_link_helper.dart';
import 'package:ayo_indonesia_mobile_apps/utilities/helpers.dart';
import 'package:provider/provider.dart';
import 'package:ayo_indonesia_mobile_apps/services/connection_service.dart';
import 'package:flutter_localization/flutter_localization.dart';

import '../../../components/bottomsheet/match_cam_general_info.dart';
import '../../team_profile_new/team_profile.dart';
import 'membership/package_screen.dart';
import 'package:ayo_indonesia_mobile_apps/screens/venue/checkout/membership/new_schedule/new_choose_schedule_bundling_screen.dart';

class VenueDetailScreen extends StatelessWidget {
  static const routeName = '/venue/detail';

  const VenueDetailScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Map args = ModalRoute.of(context).settings.arguments;
    int venueId = args['venue_id'] ?? 0;
    String integrationType = args['integration_type'] ?? 'GENERAL';
    return MultiBlocProvider(
      providers: [
        BlocProvider<VenueDetailBloc>(
          create: (context) => VenueDetailBloc(),
        ),
        BlocProvider<VenueCancelPolicyBloc>(
          create: (context) => VenueCancelPolicyBloc(),
        ),
        BlocProvider<CategoryBloc>(
          create: (context) {
            return CategoryBloc(repository: CategoryRepositoryImpl());
          },
        ),
        BlocProvider<VenueFavoriteBloc>(
          create: (context) => VenueFavoriteBloc(),
        ),
      ],
      child: ContentVenueDetailScreen(
          venueId: venueId, integrationType: integrationType, context: context),
    );
  }
}

class ContentVenueDetailScreen extends StatefulWidget {
  final int venueId;
  final BuildContext context;

  final String sport;
  final String integrationType;
  ContentVenueDetailScreen(
      {Key key, this.venueId, this.integrationType, this.sport, this.context})
      : super(key: key);

  @override
  _ContentVenueDetailScreenState createState() =>
      _ContentVenueDetailScreenState();
}

class _ContentVenueDetailScreenState extends State<ContentVenueDetailScreen> {
  bool isLoading = false;
  final eventDate = new DateFormat('d MMM yyyy, HH:mm · ');
  final reviewDate = new DateFormat('d MMM yyyy');
  int newSportFilter = 0;
  List<Map<String, dynamic>> sportImageList = [];
  List<Map<String, dynamic>> shortFacilities = [];
  Future<VenueCartModel> _cartTotalFuture;
  double horizontalPadding = 16;
  ScrollController scrollController = ScrollController();
  ScrollController parentScrollController = ScrollController();
  TabController _tabController;
  int currentTabIndex = 0;
  bool isShowScrollToTop = false;
  int venueRatingStar = 0;
  String customVenueRatingStar = '';
  List<String> splitRating;
  int ratingNotFull = 0;
  AutoScrollController calendarController = AutoScrollController();
  List listNewCalendar = [];
  List membershipTypes = ['langganan', 'bundling'];
  String membershipType = '';
  DateTime ruleDate = DateTime.now();
  DateTime _date = DateTime.now();
  String _selectedDateSave = DateFormat('yyyy-MM-dd').format(DateTime.now());
  DateTime startDate = DateTime.now();
  bool newVenueJumpDate = false;
  DateTime _focusedDay = DateTime.now();
  DateTime currentPage = DateTime.now();
  DateTime dateNow = DateTime.now();
  DateTime _selectedDay;
  String _sortCommunityRadio = 'is_most_members';
  bool _isApplySortCommunityButtonShown = false;
  String _currentSortCommunityRadio = 'is_most_members';
  List<String> sportCategoryName = [];
  bool allSport = false;
  bool myPref = true;
  List<int> sports = [];
  List<CategoryData> sportCategory = [];
  int totalFilter = 0;
  bool isMode2 = false;
  bool isLoadActivity = false;
  bool isLoadCoach = false;
  bool isLoadMembership = false;
  bool isLoadCommunity = false;
  MaxVoucher maxVoucher = null;
  String sortCommunity = 'is_most_members';
  List<dynamic> categoryActivityDatas;
  List<String> categoryName = [];
  List<int> categoryId = [];
  String filterDateActivity = '';
  int filterDateX = 0;

// load more community
  List<VenueCommunityData> venueCommunityData = [];
  bool hasMoreCommunity = true;
  int currentTotalCommunity = 100;

// load more membership
  List<VenueMembership> venueMembershipData = [];
  bool hasMoreMembership = true;
  int currentTotalMembership = 10;

// load more coach
  List<VenueCoach> venueCoachData = [];
  bool hasMoreCoach = true;
  int currentTotalCoach = 10;

// load more activity
  List<VenueEventDataNew> venueActivityData = [];
  bool hasMoreActivity = true;
  int currentTotalActivity = 10;

//   activity
  bool filterCoaching = false;
  bool filterBookedViaAyo = false;
  bool filterSuperhost = false;
  bool filterOfficialByVenue = false;
  String selectedLevel = 'Semua Level';
  SfRangeValues integerSelectedLevelList = SfRangeValues(0, 4);
  SfRangeValues finalLevelList = SfRangeValues(0, 4);
  int startLevel = 0;
  int endLevel = 4;
  List selectedLevelList = [];
  List<Map<String, dynamic>> filterLevelList = [];
  List levelList = ['Newbie', 'Beginner', 'Intermediate', 'Advanced', 'Pro'];
  bool _isApplyFilterButtonClicked = false;
  bool _isApplyFilterButtonShown = false;
  List timeList = [
    '00:00',
    '01:00',
    '02:00',
    '03:00',
    '04:00',
    '05:00',
    '06:00',
    '07:00',
    '08:00',
    '09:00',
    '10:00',
    '11:00',
    '12:00',
    '13:00',
    '14:00',
    '15:00',
    '16:00',
    '17:00',
    '18:00',
    '19:00',
    '20:00',
    '21:00',
    '22:00',
    '23:00'
  ];
  String selectedTimeStart = '00:00';
  String selectedTimeEnd = '23:00';
  SfRangeValues integerSelectedTimeList = SfRangeValues(0, 23);
  SfRangeValues finalTimeList = SfRangeValues(0, 23);
  int filterStartTime = 0;
  int filterEndTime = 23;
  List selectedTimeList = [];
  List<Map<String, dynamic>> filterTimeList = [];
  List timeFilterSelected = [];

  List<Map<dynamic, String>> sortCommunityOptions = [
    {'name': 'Anggota terbanyak', 'value': 'is_most_members'},
    {'name': 'Komunitas terbaru', 'value': 'is_newest_community'},
  ];

  List<Map<String, dynamic>> tab = [
    {
      'name': 'Booking',
      'value': 'booking',
      'is_active': true,
    },
    {
      'name': 'Aktivitas',
      'value': 'aktivitas',
      'is_active': false,
    },
    {
      'name': 'Coach',
      'value': 'coach',
      'is_active': false,
    },
    {
      'name': 'Membership',
      'value': 'membership',
      'is_active': false,
    },
    {
      'name': 'Komunitas',
      'value': 'komunitas',
      'is_active': false,
    },
  ];

  String activeTab = 'booking';

  int venueOpenPlayRatingStar = 0;
  String customVenueOpenPlayRatingStar = '';
  List<String> splitRatingOpenPlay;
  int ratingNotFullOpenPlay = 0;

  String reviewName = 'Sewa Lapangan';
  String reviewValue = 'field';

  /// Categories keys
  final List<GlobalKey> jewelleryCategories = [
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
  ];

  final tabs = [
    'Ringkasan',
    'Fasilitas',
    'Aktivitas',
    'Komunitas',
    'Ulasan',
    'Refund & Reschedule',
  ];

  bool isMembershipLoading = true;
  List<CategoryData> category = [];
  CategoryBloc categoryBloc;
  String sportCategoryValue = 'Sepak Bola';
  List<int> sportCategoryId = [1, 2, 3];
  int sportCategoryIdValue = 0;
  String selectedSport = 'Pilih Cabor';
  String selectedSportImage = '';
  int productVariantId = 0;
  String productVariantName = '';
  var sportSelectorController = TextEditingController();
  var citySelectorController = TextEditingController();
  String headerImage = '';
  VenueCartRepository venueCartRepository = VenueCartRepository();

  static ////final facebookAppEvents = FacebookAppEvents();
      bool _venueTimeExpand = false;
  bool _isDetailLoaded = false;
  String venueName = "";
  String venueAddress = "";
  String description = "";
  String venueRules = "";
  int basePrice = 0;
  int reschedulePolicy = 0;
  CancelPolicy cancelPolicy;
  DateTime selectedDateValue = DateTime.now();
  String shareUrl;
  bool isVenueFavorite = false;
  bool isVenueFavoriteAdd = false;
  OperationTime currentDayOperationTime;
  int venueIds = 0;
  int totalCart = 0;
  int finalTotalCart = 0;
  int isDisableShowNearbyVenue = 0;

  void showButtonCheckScrollToTop() {
    setState(() {
      isShowScrollToTop = true;
    });
  }

  void hideButtonCheckScrollToTop() {
    setState(() {
      isShowScrollToTop = false;
    });
  }

  void _updateTotalCart() async {
    VenueCartModel venueCartResponse = await venueCartRepository.getCartTotal(
      widget.context,
    );

    setState(() {
      if (venueCartResponse.data != null) {
        totalCart = venueCartResponse.data.totalCart;
      } else {
        totalCart = 0;
      }
    });
  }

  int currentTotalmemberships = 0;
  // * VOUCHER
  VenueVoucherRepository venueVoucherRepository = VenueVoucherRepository();

  VenueMembershipRepository venueMembershipTncRepository =
      VenueMembershipRepository();

  List<VenueVoucherData> vouchers = [];

  VenueMembershipRepository venueMembershipRepository =
      VenueMembershipRepository();

  List<VenueMembership> memberships = [];
  VenueReview venueReviews;

  List<Widget> bannerList = [
    Container(
      width: double.infinity,
      height: 350,
      color: Colors.black38,
    ),
    Container(
      width: double.infinity,
      height: 350,
      color: Colors.grey,
    ),
    Container(
      width: double.infinity,
      height: 350,
      color: Colors.red,
    ),
  ];

  bool _showAppbar = false;
  ScrollController _scrollBottomBarController;
  bool isScrollingDown = false;
  List package = ['langganan'];
  bool isBundlingPackageExist = false;
  bool isLanggananPackageExist = false;

  void showAppBar() {
    setState(() {
      isScrollingDown = false;
      _showAppbar = true;
    });
  }

  void hideAppBar() {
    setState(() {
      isScrollingDown = true;
      _showAppbar = false;
    });
  }

  VenueRepository venueRepository = VenueRepository();

  VenueDetailBloc venueDetailBloc;
  VenueDetailBloc highlightReviewVenueDetailBloc;
  VenueDetailBloc reviewVenueBloc;
  VenueDetailBloc otherVenuesBloc;
  VenueDetailBloc eventVenuesBloc;
  VenueDetailBloc coachVenuesBloc;
  VenueDetailBloc membershipVenuesBloc;
  VenueDetailBloc communitiesBloc;
  VenueCancelPolicyBloc venueCancelPolicyBloc;
  List<Map<String, dynamic>> groupedOperationTimes = [];
  int pickedSportId = 0;
  final SharedPreferencesManager _sharedPreferencesManager =
      locator<SharedPreferencesManager>();
  Future<int> _checkPickedSport(category) async {
    pickedSportId = category.id;

    LoadingDialogWidget.show(context);
    MainResponseApi responseApi = await venueCartRepository.checkCartSports(
        widget.context,
        sportId: pickedSportId,
        venueId: widget.venueId);
    if (responseApi.statusCode == 200) {
      LoadingDialogWidget.hide(context);
      return 0; // true means match existing sport in db
    } else {
      if (responseApi.statusCode == 202) {
        LoadingDialogWidget.hide(context);
        changeVenueAsk(context, category);
        return 2;
      } else {
        LoadingDialogWidget.hide(context);
        return 0;
      }
      // else {
      //   LoadingDialogWidget.hide(context);
      //   customFlutterToast(
      //     context: context,
      //     msg: responseApi.message.toString(),
      //     customToastType: CustomToastType.ERROR,
      //   );
      //   // Navigator.of(context).pushNamedAndRemoveUntil(
      //   //   ReviewOrderVenueScreen.routeName,
      //   //   ModalRoute.withName(widget.removeUntilRoute),
      //   //   arguments: {
      //   //     'remove_until_route': widget.removeUntilRoute,
      //   //   },
      //   // );
      //   return 1;
      // }
    }
  }

  Future<int> _checkPickedSportCoach(category) async {
    pickedSportId = category.sportId;

    LoadingDialogWidget.show(context);
    MainResponseApi responseApi = await venueCartRepository.checkCartSports(
        widget.context,
        sportId: pickedSportId,
        venueId: widget.venueId);
    if (responseApi.statusCode == 200) {
      LoadingDialogWidget.hide(context);
      return 0; // true means match existing sport in db
    } else {
      if (responseApi.statusCode == 202) {
        LoadingDialogWidget.hide(context);
        changeVenueAsk(context, category);
        return 2;
      } else {
        LoadingDialogWidget.hide(context);
        return 0;
      }
    }
  }

  final Dio _dio = Dio();

  String _getVenueDescriptions(List<AditionalInformation> descPoints) {
    String venueDescriptions = '';
    for (var i = 0; i < descPoints.length; i++) {
      venueDescriptions += descPoints[i].content;
      if (i < descPoints.length - 1) venueDescriptions += ', ';
    }

    return venueDescriptions;
  }

  String _getCancelPolicyDescription(int percentage) {
    String cancelDescription = '';
    if (cancelPolicy.name == VenueBookingConstant.cancelPolicyFlexible ||
        cancelPolicy.name == VenueBookingConstant.cancelPolicyMedium) {
      int daysUntilFullRefund =
          cancelPolicy.name == VenueBookingConstant.cancelPolicyFlexible
              ? 1
              : cancelPolicy.name == VenueBookingConstant.cancelPolicyMedium
                  ? 5
                  : 0;
      DateTime comparisonDateTime =
          selectedDateValue.subtract(Duration(hours: daysUntilFullRefund * 24));

      cancelDescription = '${context.formatString(
        AppLocale.pembatalanBooking,
        [],
      )} ';
      if (percentage < 100) {
        if (cancelPolicy.name == VenueBookingConstant.cancelPolicyFlexible) {
          cancelDescription += context.formatString(
            AppLocale.kebijakanPembatalanFlexUnderOneHundred,
            [],
          );
        } else {
          cancelDescription += context.formatString(
            AppLocale.kebijakanPembatalanNonFlexUnderOneHundred,
            [daysUntilFullRefund],
          );
        }
      } else {
        if (cancelPolicy.name == VenueBookingConstant.cancelPolicyFlexible) {
          cancelDescription += context.formatString(
            AppLocale.kebijakanPembatalanFlexOneHundred,
            [],
          );
        } else {
          cancelDescription += context.formatString(
            AppLocale.kebijakanPembatalanNonFlexOneHundred,
            [daysUntilFullRefund],
          );
        }
      }
    } else if (cancelPolicy.name == VenueBookingConstant.cancelPolicyFirm) {
      if (percentage > 0) {
        DateTime comparisonDateTime = selectedDateValue
            .subtract(Duration(hours: (percentage == 100) ? 7 * 24 : 1 * 24));
        cancelDescription = 'Pembatalan reservasi hingga ' +
            Helpers.getLocalDayName(comparisonDateTime) +
            ', ' +
            Helpers.getLocalDateFormat(comparisonDateTime);
      } else {
        cancelDescription = 'Pembatalan reservasi pada ' +
            Helpers.getLocalDayName(selectedDateValue) +
            ', ' +
            Helpers.getLocalDateFormat(selectedDateValue) +
            ' tidak dapat dilakukan';
      }
    } else if (cancelPolicy.name == VenueBookingConstant.cancelPolicyStrict) {
      cancelDescription +=
          context.formatString(AppLocale.booking_tidak_dapat_dibatalkan, []);
    }

    return cancelDescription;
  }

  void changeVenueAsk(context, category) {
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
        ),
        context: context,
        builder: (context) {
          return ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16),
              topRight: Radius.circular(16),
            ),
            child: Container(
              padding: EdgeInsets.fromLTRB(24, 8, 24, 24),
              color: Colors.white,
              child: Wrap(
                runAlignment: WrapAlignment.center,
                children: <Widget>[
                  SingleChildScrollView(
                    child: Container(
                      padding: EdgeInsets.only(
                          bottom: MediaQuery.of(context).viewInsets.bottom),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          InkWell(
                            onTap: () {},
                            child: Center(
                              child: Container(
                                margin: EdgeInsets.only(top: 8, bottom: 16),
                                width: 40,
                                height: 4.0,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(6),
                                  color: Colors.black26,
                                ),
                              ),
                            ),
                          ),
                          SizedBox(height: 10),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                context.formatString(
                                        AppLocale.ganti_venue, []) +
                                    '?',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    fontSize: ScreenUtil().scaleText * 20,
                                    fontFamily: 'Rubik',
                                    fontWeight: FontWeight.w500),
                              )
                            ],
                          ),
                          SizedBox(height: 12),
                          Text(
                            context.formatString(
                                AppLocale.keranjang_aktif_venue, []),
                            style: TextFontConst.RUBIK_REGULAR_16
                                .copyWith(color: ColorBase.black80),
                          ),
                          SizedBox(height: 24),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Expanded(
                                    child: GestureDetector(
                                      onTap: () {
                                        Navigator.pop(context);
                                      },
                                      child: Container(
                                        height: 38,
                                        padding: EdgeInsets.all(5),
                                        decoration: BoxDecoration(
                                            color: Colors.transparent,
                                            borderRadius:
                                                BorderRadius.circular(12),
                                            border: Border.all(
                                                color: ColorBase.primaryRed)),
                                        child: Center(
                                          child: Text(
                                            context.formatString(
                                                AppLocale.batal, []),
                                            style: TextFontConst
                                                .RUBIK_MEDIUM_RED_14
                                                .copyWith(height: 1),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: 10),
                                  Expanded(
                                    child: GestureDetector(
                                      onTap: () async {
                                        deleteCurrentCart(category);
                                      },
                                      child: Container(
                                        height: 38,
                                        padding: EdgeInsets.all(5),
                                        decoration: BoxDecoration(
                                          color: ColorBase.primaryRed,
                                          borderRadius:
                                              BorderRadius.circular(12),
                                        ),
                                        child: Center(
                                          child: Text(
                                            context.formatString(
                                                AppLocale.ya_ganti_venue, []),
                                            style: TextFontConst
                                                .RUBIK_MEDIUM_WHITE_14
                                                .copyWith(height: 1),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              )
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }

  changePage(DateTime datetime) {
    setState(() {
      Future.delayed(
        Duration(microseconds: 500),
        () {
          currentPage = datetime;
          int scrollTarget = 0;
          DateTime currentNormalDate = DateTime.now();
          if (newVenueJumpDate == true) {
            currentNormalDate = dateNow;
          }

          jumpToDate(scrollTarget);

          _selectedDay = datetime;

          _selectedDateSave = DateFormat('yyyy-MM-dd').format(_selectedDay);
          String dayName =
              DateFormat('EEEE').format(currentPage).toString().toLowerCase();

          _focusedDay = currentPage;
        },
      );
    });
  }

  void jumpToDate(scrollTarget) {
    if (scrollTarget > listNewCalendar.length) {
      _generateCalendar(reload: true, newVenueJumpDate: newVenueJumpDate);
      jumpToDate(scrollTarget);
    } else {
      calendarController.scrollToIndex(scrollTarget,
          preferPosition: AutoScrollPosition.middle);
    }
  }

  void _generateCalendar({bool reload, bool newVenueJumpDate}) {
    setState(() {
      if (reload == null) {
        reload = false;
      }
      if ((int.parse(DateFormat('yyyyMMdd').format(startDate)) >
              int.parse(DateFormat('yyyyMMdd').format(ruleDate))) &&
          newVenueJumpDate == false) {
      } else {
        if (reload && newVenueJumpDate == false) {
          if ((int.parse(DateFormat('yyyyMMdd').format(startDate)) <=
              int.parse(DateFormat('yyyyMMdd').format(ruleDate)))) {
            DateTime dateAdd =
                DateTime.parse(DateFormat('yyyy-MM-dd').format(startDate));
            listNewCalendar.add(dateAdd);
            startDate = startDate.add(Duration(days: 1));
          }
        } else {
          for (var i = 0; i < 14; i++) {
            DateTime dateAdd =
                DateTime.parse(DateFormat('yyyy-MM-dd').format(startDate));
            listNewCalendar.add(dateAdd);
            startDate = startDate.add(Duration(days: 1));
          }

          print('_generateCalendar ruleDate: $listNewCalendar');
        }
      }
    });
  }

  void chooseField(category) async {
    setState(() {
      sportCategoryValue = category.name;
      sportCategoryIdValue = category.id;
      selectedSport = category.name;
      sportSelectorController.text = category.name;
      selectedSportImage = category.exploreImage;

      _sharedPreferencesManager.putBool('is_new_select_schedule', true);
      Navigator.of(context)
          .pushNamed(NewChooseScheduleScreen.routeName, arguments: {
        'venue_id': widget.venueId,
        'integration_type': widget.integrationType,
        'sport_name': selectedSport,
        'sport_id': sportCategoryIdValue,
      });
    });
  }

  void chooseFieldCoach(category, fieldAdditionalServiceId) async {
    setState(() {
      sportCategoryValue = category.name;
      sportCategoryIdValue = category.sportId;
      selectedSport = category.name;
      sportSelectorController.text = category.name;
      selectedSportImage = category.svgFillPath;
      productVariantId = category.id;
      productVariantName = category.coachName;

      _sharedPreferencesManager.putBool('is_new_select_schedule', true);
      Navigator.of(context)
          .pushNamed(NewChooseScheduleScreen.routeName, arguments: {
        'venue_id': widget.venueId,
        'integration_type': widget.integrationType,
        'sport_name': selectedSport,
        'sport_id': sportCategoryIdValue,
        'filter_coach_id': productVariantId,
        'filter_coach_name': productVariantName,
        'field_additional_service_id': fieldAdditionalServiceId
      });
    });
  }

  void deleteCurrentCart(category) async {
    var mobileToken = _sharedPreferencesManager
        .getString(SharedPreferencesManager.keyMobileToken)
        .toString()
        .replaceAll("null", "");

    var query =
        '?mobile_token=' + mobileToken + '&signature=' + '&type=OPEN_PLAY';
    var apiUrl = '${BaseUrlConfig.baseUrlApi}/venue-user/cart/0/delete' + query;

    Uri uri = Uri.parse(apiUrl);
    var response = await Provider.of<ConnectionService>(context, listen: false)
        .returnConnection()
        .get(uri);

    Navigator.pop(context);
    chooseField(category);
  }

  void generateGroupedOperationTimes(VenueDetail venue) {
    setState(() {
      Map<int, Map<String, dynamic>> tempGroups = {};
      groupedOperationTimes.clear();
      int tempIdx = 0;
      String prevOperationHours = '';
      for (var i = 0; i < venue.defaultOperationTimes.length; i++) {
        String currentStartTime = '';
        String currentEndTime = '';
        String currentOperationalHours = '';

        if (venue.defaultOperationTimes[i].status == 'active') {
          currentStartTime = venue.defaultOperationTimes[i].startTime.substring(
              0, venue.defaultOperationTimes[i].startTime.length - 3);
          currentEndTime = venue.defaultOperationTimes[i].endTime
              .substring(0, venue.defaultOperationTimes[i].endTime.length - 3);
          currentOperationalHours = currentStartTime + ' - ' + currentEndTime;
        } else {
          currentOperationalHours = 'Tutup';
        }

        if (prevOperationHours == '')
          prevOperationHours = currentOperationalHours;

        if (currentOperationalHours != prevOperationHours) {
          tempIdx++;
          prevOperationHours = currentOperationalHours;
        }

        if (!tempGroups.containsKey(tempIdx)) {
          tempGroups[tempIdx] = {
            'hours': currentOperationalHours,
            'days': [],
          };
          tempGroups[tempIdx]['days'].add(venue.defaultOperationTimes[i].day);
        } else {
          tempGroups[tempIdx]['days'].add(venue.defaultOperationTimes[i].day);
        }
      }
      groupedOperationTimes.addAll(List.from(tempGroups.values));
    });
  }

  void SaveVenueDetailClick() async {
    await venueRepository.SaveVenueDetailClick(widget.context,
        venueId: widget.venueId);
  }

  @override
  void initState() {
    super.initState();
    shareUrl = '';

    categoryBloc = BlocProvider.of<CategoryBloc>(context);
    categoryBloc.add(FetchVenueCategoryByVenue(widget.venueId, context));

    SaveVenueDetailClick();

    _loadMembership();

    for (var i = 0; i < 14; i++) {
      DateTime dateAdd =
          DateTime.parse(DateFormat('yyyy-MM-dd').format(startDate));
      listNewCalendar.add(dateAdd);
      startDate = startDate.add(Duration(days: 1));
    }

    Future.delayed(const Duration(milliseconds: 230), () {
      setState(() {
        filterLevelList.addAll([
          {
            'label': context.formatString(AppLocale.semuaLevel, []),
            'value': true
          },
          {'label': 'Newbie', 'value': false},
          {'label': 'Beginner', 'value': false},
          {'label': 'Intermediate', 'value': false},
          {'label': 'Advanced', 'value': false},
          {'label': 'Pro', 'value': false},
        ]);
      });
    });

    venueDetailBloc = BlocProvider.of<VenueDetailBloc>(context)
      ..add(FetchVenueDetail(
        widget.venueId,
        widget.context,
      ));

    highlightReviewVenueDetailBloc = BlocProvider.of<VenueDetailBloc>(context)
      ..add(FetchHighlightReviewVenue(
        widget.venueId,
        widget.context,
      ));

    reviewVenueBloc = BlocProvider.of<VenueDetailBloc>(context)
      ..add(FetchReviewVenue(
        widget.venueId,
        widget.context,
      ));

    reviewVenueBloc = BlocProvider.of<VenueDetailBloc>(context)
      ..add(FetchReviewOpenPlayVenue(
        widget.venueId,
        widget.context,
      ));

    otherVenuesBloc = BlocProvider.of<VenueDetailBloc>(context)
      ..add(FetchOtherVenues(
        widget.venueId,
        widget.context,
      ));

    _scrollBottomBarController = new ScrollController();

    _scrollBottomBarController.addListener(() {
      if (_scrollBottomBarController.position.pixels >= 200 &&
          _scrollBottomBarController.position.pixels <= 400) {
        if (isScrollingDown) {
          showAppBar();
          showButtonCheckScrollToTop();
        }
      } else if (_scrollBottomBarController.position.pixels >= 400) {
        showAppBar();
        showButtonCheckScrollToTop();
        isMode2 = true;
      } else {
        if (!isScrollingDown) {
          hideAppBar();
          hideButtonCheckScrollToTop();
          isMode2 = false;
        }
      }

      if (_scrollBottomBarController.position.pixels ==
              _scrollBottomBarController.position.maxScrollExtent &&
          !isLoading) {
        if (activeTab == 'komunitas' && hasMoreCommunity) {
          _getMoreDataCommunity();
        }

        if (activeTab == 'membership' && hasMoreMembership) {
          _getMoreDataMembership();
        }

        if (activeTab == 'coach' && hasMoreCoach) {
          _getMoreDataCoach();
        }

        if (activeTab == 'aktivitas' && hasMoreActivity) {
          _getMoreDataActivity();
        }
      }
    });

    parentScrollController.addListener(() {
      //
      //
    });

    Future.delayed(const Duration(milliseconds: 0), () {
      //   getMembershipData();
      getTotalVoucher();
    });

    _cartTotalFuture = venueCartRepository.getCartTotal(
      widget.context,
    );

    _updateTotalCart();

    _markers = <MarkerId, Marker>{};
    _mapController = Completer();
  }

  _getMoreDataCommunity() {
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });

      venueRepository
          .getCommunities(
        widget.venueId,
        currentTotalCommunity,
        100,
        sports,
        sortCommunity,
        widget.context,
      )
          .then((val) {
        setState(() {
          if (val.data.communities.length > 0) {
            currentTotalCommunity += 100;
            hasMoreCommunity = true;
            venueCommunityData.addAll(val.data.communities);
          } else {
            hasMoreCommunity = false;
          }
          isLoading = false;
        });
      });
    }
  }

  _getMoreDataMembership() {
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });

      venueMembershipRepository
          .membershipList(
        widget.context,
        venueId: widget.venueId,
        types: membershipTypes,
        visibilities: ['public'],
        start_from: currentTotalMembership,
        limit: 10,
      )
          .then((val) {
        setState(() {
          if (val.data.length > 0) {
            currentTotalMembership += 10;
            hasMoreMembership = true;
            venueMembershipData.addAll(val.data);
          } else {
            hasMoreMembership = false;
          }
          isLoading = false;
        });
      });
    }
  }

  _getMoreDataCoach() {
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });

      venueRepository
          .getCoachVenues(
        widget.venueId,
        currentTotalCoach,
        10,
        sports,
        widget.context,
      )
          .then((val) {
        setState(() {
          if (val.data.length > 0) {
            currentTotalCoach += 10;
            hasMoreCoach = true;
            venueCoachData.addAll(val.data);
          } else {
            hasMoreCoach = false;
          }
          isLoading = false;
        });
      });
    }
  }

  _getMoreDataActivity() {
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });

      venueRepository
          .getEventVenues(
        widget.venueId,
        currentTotalActivity,
        10,
        categoryName,
        filterCoaching,
        filterBookedViaAyo,
        filterSuperhost,
        filterOfficialByVenue,
        selectedLevelList,
        timeFilterSelected,
        filterDateActivity,
        widget.context,
      )
          .then((val) {
        setState(() {
          if (val.data.events.length > 0) {
            currentTotalActivity += 10;
            hasMoreActivity = true;
            venueActivityData.addAll(val.data.events);
          } else {
            hasMoreActivity = false;
          }
          isLoading = false;
        });
      });
    }
  }

  void getTotalVoucher() async {
    try {
      VenueVoucherModel response = await venueVoucherRepository
          .profileList(widget.context, venueId: widget.venueId);

      if (response.statusCode == 200) {
        vouchers.clear();
        vouchers.addAll(response.data);
      }
    } catch (Exception) {}
  }

  void getMembershipData() async {
    try {
      venueMembershipRepository
          .membershipList(
        context,
        venueId: widget.venueId,
        start_from: 0,
        types: ['langganan', 'bundling'],
        visibilities: ['public'],
        limit: 50,
      )
          .then((val) {
        setState(() {
          memberships.clear();
          if (val.data.length > 0) {
            val.data.forEach((VenueMembership package) {
              if (package.type == 'bundling') {
                isBundlingPackageExist = true;
              }
              if (package.type == 'langganan') {
                isLanggananPackageExist = true;
              }
            });
            if (isBundlingPackageExist) {
              package = ['bundling'];
            } else {
              package = ['langganan'];
            }

            memberships.addAll(val.data);
            package.clear();
            package.add(memberships[0].type);
          } else {}
          // isLoading = false;
          setState(() {
            isMembershipLoading = false;
          });
        });
      });
    } catch (Exception) {}
  }

  String _markerIdVal({bool increment = false}) {
    String val = 'marker_id_$_markerIdCounter';
    if (increment) _markerIdCounter++;
    return val;
  }

  static Future<void> openMap(double latitude, double longitude) async {
    String googleUrl =
        'https://www.google.com/maps/search/?api=1&query=$latitude,$longitude';
    await launch(googleUrl, forceSafariVC: false);
  }

  // * MAPS
  bool _isMapActive = false;
  Map<MarkerId, Marker> _markers;
  Marker marker;
  int _markerIdCounter = 0;
  Completer<GoogleMapController> _mapController;
  double lat;
  double lng;

  void _onMapCreated(GoogleMapController controller) async {
    _mapController.complete(controller);
    LatLng position = LatLng(lat, lng);

    if ([position] != null) {
      MarkerId markerId = MarkerId(_markerIdVal());
      Marker marker = Marker(
        markerId: markerId,
        position: position,
        draggable: false,
        icon: await BitmapDescriptor.fromAssetImage(
            ImageConfiguration(devicePixelRatio: 2.5),
            'assets/images/ayo-pin-2.png'),
      );
      setState(() {
        _markers[markerId] = marker;
      });

      Future.delayed(Duration(seconds: 1), () async {
        GoogleMapController controller = await _mapController.future;
        controller.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              target: position,
              zoom: 10.0,
            ),
          ),
        );
      });
    }
  }

  double distanceToVenue = 0.0;
  void calculateDistanceToVenue() async {
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);

    setState(() {
      // * CALCULATE DISTANCE
      var distance = DLatLng.Distance();
      final km = distance.as(
          DLatLng.LengthUnit.Kilometer,
          DLatLng.LatLng(lat, lng),
          DLatLng.LatLng(position.latitude, position.longitude));
      distanceToVenue = km;
    });
  }

  @override
  void dispose() {
    _scrollBottomBarController.dispose();
    _scrollBottomBarController.removeListener(() {});
    super.dispose();
  }

  @override
  void setState(fn) {
    if (mounted) {
      super.setState(fn);
    }
  }

  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;
    double screenWidth = MediaQuery.of(context).size.width;

    return Container(
        color: Colors.white,
        child: SafeArea(
          top: false,
          child: CustomWrapper(
            floatingActionButton: Visibility(
              visible: (totalCart > 0 ||
                      _sharedPreferencesManager.getInt("total_cart") > 0 ||
                      isShowScrollToTop)
                  ? true
                  : false,
              child: AnimatedOpacity(
                opacity: 1,
                curve: Curves.easeOutBack,
                duration: Duration(milliseconds: 500),
                child: Padding(
                  padding: const EdgeInsets.only(bottom: 0.0),
                  child: isShowScrollToTop
                      ? FloatingActionButton(
                          onPressed: () {
                            _scrollBottomBarController.animateTo(
                              0.0,
                              duration: const Duration(milliseconds: 300),
                              curve: Curves.ease,
                            );
                          },
                          child: SvgPicture.asset(
                            'assets/images/ver3/svg/scroll-to-top.svg',
                            fit: BoxFit.contain,
                            width: 20,
                            height: 20,
                          ),
                          backgroundColor: ColorBase.primaryWhite,
                        )
                      : FloatingActionButton(
                          backgroundColor: Colors.white,
                          child: Stack(
                            clipBehavior: Clip.none,
                            children: [
                              Positioned(
                                right: finalTotalCart > 9 ? -7 : -5,
                                top: finalTotalCart > 9 ? -7 : -5,
                                child: FutureBuilder<VenueCartModel>(
                                  future: _cartTotalFuture,
                                  builder: (BuildContext context,
                                      AsyncSnapshot snapshot) {
                                    switch (snapshot.connectionState) {
                                      case ConnectionState.none:
                                        return Skeleton(width: 12, height: 12);
                                      case ConnectionState.waiting:
                                        return Skeleton(width: 12, height: 12);
                                      case ConnectionState.active:
                                        return Skeleton(width: 12, height: 12);
                                      case ConnectionState.done:
                                        if (snapshot.data == null) {
                                          return Center(
                                            child: CircularProgressIndicator(),
                                          );
                                        } else {
                                          VenueCartData venueCartData =
                                              snapshot.data.data;

                                          totalCart = venueCartData.totalCart;

                                          if (venueCartData.totalCart > 0 &&
                                              _sharedPreferencesManager
                                                      .getInt("total_cart") ==
                                                  venueCartData.totalCart) {
                                            finalTotalCart =
                                                venueCartData.totalCart;
                                          } else if (_sharedPreferencesManager
                                                  .getInt("total_cart") ==
                                              0) {
                                            finalTotalCart =
                                                venueCartData.totalCart;
                                          } else {
                                            finalTotalCart =
                                                _sharedPreferencesManager
                                                    .getInt("total_cart");
                                          }

                                          venueIds = venueCartData.venueId;
                                          return GestureDetector(
                                            onTap: () {},
                                            child: Container(
                                              width:
                                                  finalTotalCart > 9 ? 16 : 12,
                                              height:
                                                  finalTotalCart > 9 ? 16 : 12,
                                              padding: EdgeInsets.all(2),
                                              child: Text(
                                                finalTotalCart.toString(),
                                                textAlign: TextAlign.center,
                                                style: TextFontConst
                                                    .RUBIK_MEDIUM
                                                    .copyWith(
                                                        fontSize: ScreenUtil()
                                                                .scaleText *
                                                            8,
                                                        color: Colors.white,
                                                        height:
                                                            finalTotalCart > 9
                                                                ? 1.3
                                                                : 1),
                                              ),
                                              decoration: BoxDecoration(
                                                  shape: BoxShape.circle,
                                                  color: ColorBase.primaryRed),
                                            ),
                                          );
                                        }
                                    }
                                  },
                                ),
                              ),
                              SvgPicture.asset('assets/icons/cart.svg'),
                            ],
                          ),
                          onPressed: () {
                            if (totalCart > 0 ||
                                _sharedPreferencesManager.getInt("total_cart") >
                                    0) {
                              Navigator.of(context)
                                  .pushNamed(ReviewOrderVenueScreen.routeName, arguments: {}).then(
                                      (_) => setState(() {
                                            _refreshData();
                                          }));
                            }
                          },
                        ),
                ),
              ),
            ),
            bottomNavigationBar: _isDetailLoaded
                ? _buildBottomBarWidget()
                : _buildBottomBarWidgetLoading(),
            body: Stack(
              children: [
                Container(
                  child: SingleChildScrollView(
                    controller: _scrollBottomBarController,
                    child: Container(
                      color: Colors.white,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          BlocListener<CategoryBloc, CategoryState>(
                            bloc: categoryBloc,
                            listener: (ctx, state) {
                              if (state is VenueCategoryLoadedState) {
                                if (state.categories.length > 0) {
                                  setState(() {
                                    sportImageList.clear();

                                    for (var i = 0;
                                        i < state.categories.length;
                                        i++) {
                                      sportImageList.add({
                                        'id': state.categories[i].id,
                                        'image': state.categories[i].svgPath,
                                        'fill_image':
                                            state.categories[i].svgFillPath,
                                        'outline_image':
                                            state.categories[i].svgOutlinePath,
                                        'name': state.categories[i].name,
                                      });
                                    }

                                    category.addAll(state.categories);
                                    if (widget.sport != null) {
                                      for (var i = 0;
                                          i < category.length;
                                          i++) {
                                        if (category[i].name == widget.sport) {
                                          category[i].isPicked = true;
                                          sportCategoryValue = category[i].name;
                                          sportCategoryIdValue = category[i].id;
                                          selectedSport = category[i].name;
                                          sportSelectorController.text =
                                              category[i].name;
                                        }
                                      }

                                      _refreshData();
                                    } else {
                                      _refreshData();
                                    }
                                  });
                                }
                              }
                            },
                            child: SizedBox(),
                          ),
                          BlocListener<VenueCancelPolicyBloc,
                              VenueCancelPolicyState>(
                            bloc: venueCancelPolicyBloc,
                            listenWhen: (previous, current) {
                              if (current is VenueCancelPolicyLoading ||
                                  current is VenueCancelPolicyFailure ||
                                  current is VenueCancelPolicyLoaded) {
                                return true;
                              }
                              return false;
                            },
                            listener: (ctx, state) {
                              if (state is VenueCancelPolicyLoaded) {
                                setState(() {
                                  cancelPolicy = state.cancelPolicy;
                                });
                              }
                            },
                            child: SizedBox(height: 0),
                          ),
                          BlocConsumer<VenueDetailBloc, VenueDetailState>(
                            bloc: venueDetailBloc,
                            listener: (ctx, state) {
                              if (state is ReviewVenueLoaded) {
                                venueRatingStar = int.parse(state
                                    .venueReview.summary.venueRating
                                    .toString()
                                    .substring(0, 1));

                                customVenueRatingStar = double.parse(
                                        state.venueReview.summary.venueRating)
                                    .toStringAsFixed(1);
                                splitRating = customVenueRatingStar.split('.');
                                ratingNotFull =
                                    int.parse(splitRating[1]) != 0 ? 1 : 0;
                              }
                              if (state is VenueDetailLoaded) {
                                setState(() {
                                  _isDetailLoaded = true;
                                  venueName = state.venueDetail.name;
                                  maxVoucher = state.venueDetail.maxVoucher;
                                  venueAddress = Helpers.capitalizeString(
                                      state.venueDetail.city.toLowerCase());
                                  description =
                                      state.venueDetail.description != null
                                          ? state.venueDetail.description
                                          : '';
                                  isVenueFavorite =
                                      state.venueDetail.isVenueFavorite == 1
                                          ? true
                                          : false;
                                  venueRules =
                                      state.venueDetail.venueRules != null
                                          ? state.venueDetail.venueRules
                                          : '';
                                  basePrice = state.venueDetail.basePrice;
                                  lat =
                                      double.parse(state.venueDetail.latitude);
                                  lng =
                                      double.parse(state.venueDetail.longitude);
                                  isDisableShowNearbyVenue = state
                                      .venueDetail.isDisableShowNearbyVenue;
                                  calculateDistanceToVenue();
                                  generateGroupedOperationTimes(
                                      state.venueDetail);
                                  reschedulePolicy =
                                      state.venueDetail.reschedulePolicy;

                                  for (var i = 0;
                                      i <
                                          state.venueDetail.operationTimes
                                              .length;
                                      i++) {
                                    if (state.venueDetail.operationTimes[i]
                                            .isToday ==
                                        1)
                                      currentDayOperationTime =
                                          state.venueDetail.operationTimes[i];
                                  }

                                  for (var i = 0;
                                      i < state.venueDetail.facilities.length;
                                      i++) {
                                    if (state.venueDetail.facilities[i].title
                                            .length <=
                                        7)
                                      shortFacilities.add({
                                        'title': state
                                            .venueDetail.facilities[i].title,
                                        'image': state
                                            .venueDetail.facilities[i].image,
                                      });
                                  }

                                  if (shortFacilities.length < 3) {
                                    for (var i = 0;
                                        i < state.venueDetail.facilities.length;
                                        i++) {
                                      if (state.venueDetail.facilities[i].title
                                              .length >
                                          7)
                                        shortFacilities.add({
                                          'title': state
                                              .venueDetail.facilities[i].title,
                                          'image': state
                                              .venueDetail.facilities[i].image,
                                        });
                                    }
                                  }

                                  categoryActivityDatas =
                                      state.venueDetail.sports;

                                  venueCancelPolicyBloc = BlocProvider.of<
                                      VenueCancelPolicyBloc>(context)
                                    ..add(FetchVenueCancelPolicy(
                                      state.venueDetail.id,
                                      widget.context,
                                    ));
                                });

                                Future.delayed(
                                    const Duration(milliseconds: 1000),
                                    () async {
                                  Uri x =
                                      await DynamicLinkHelper.createDynamicLink(
                                    widget.context,
                                    dataId: widget.venueId,
                                    extraData: {
                                      'venue_code': state.venueDetail.venueCode,
                                      'venue_name':
                                          venueName.replaceAll(' ', '-'),
                                    },
                                    linkType: 'venue',
                                  );
                                  setState(() {
                                    shareUrl = x.toString();
                                  });
                                });
                              }
                            },
                            buildWhen: (previous, current) {
                              if (current is VenueDetailLoading ||
                                  current is VenueDetailFailure ||
                                  current is VenueDetailLoaded) {
                                return true;
                              }
                              return false;
                            },
                            builder: (ctx, state) {
                              if (state is VenueDetailLoaded) {
                                return _buildVenueDetailContent(
                                    venueDetail: state.venueDetail);
                              } else if (state is VenueDetailFailure) {
                                return Text(
                                    'gagal: ' + state.errorMessage.toString());
                              } else {
                                return _buildVenueDetailContent(
                                    isLoading: true);
                              }
                            },
                          ),
                          if (activeTab == 'booking')
                            Container(
                              padding: EdgeInsets.only(top: 22, bottom: 12),
                              margin: EdgeInsets.symmetric(horizontal: 16),
                              child: Divider(
                                color: ColorBase.black10,
                              ),
                            ),
                          BlocBuilder<VenueDetailBloc, VenueDetailState>(
                            bloc: eventVenuesBloc,
                            buildWhen: (previous, current) {
                              if (activeTab == 'aktivitas') {
                                if (current is EventVenuesLoading ||
                                    current is EventVenuesFailure ||
                                    current is EventVenuesLoaded) {
                                  return true;
                                }
                              }

                              return false;
                            },
                            builder: (ctx, state) {
                              if (activeTab == 'aktivitas') {
                                if (state is EventVenuesLoaded) {
                                  venueActivityData = state.eventVenueList;

                                  // load more
                                  if (venueActivityData.length < 10) {
                                    hasMoreActivity = false;
                                  }

                                  if (filterDateX > 0) {
                                    calendarController.scrollToIndex(
                                      filterDateX,
                                      preferPosition: AutoScrollPosition.middle,
                                    );
                                  }

                                  return _buildEventVenueContent(
                                      eventVenueList: state.eventVenueList);
                                } else {
                                  return _buildEventVenueContent(
                                      isLoading: true);
                                }
                              } else {
                                return SizedBox(width: 0);
                              }
                            },
                          ),
                          BlocBuilder<VenueDetailBloc, VenueDetailState>(
                            bloc: coachVenuesBloc,
                            buildWhen: (previous, current) {
                              if (current is CoachVenuesLoading ||
                                  current is CoachVenuesFailure ||
                                  current is CoachVenuesLoaded) {
                                return true;
                              }
                              return false;
                            },
                            builder: (ctx, state) {
                              if (activeTab == 'coach') {
                                if (state is CoachVenuesLoaded) {
                                  venueCoachData = state.coachVenueList;

                                  // load more
                                  if (venueCoachData.length < 10) {
                                    hasMoreCoach = false;
                                  }

                                  return _buildCoachVenueContent(
                                      coachVenueList: state.coachVenueList);
                                } else {
                                  return _buildCoachVenueContent(
                                      isLoading: true);
                                }
                              } else {
                                return SizedBox(width: 0);
                              }
                            },
                          ),
                          BlocBuilder<VenueDetailBloc, VenueDetailState>(
                            bloc: membershipVenuesBloc,
                            buildWhen: (previous, current) {
                              if (current is MembershipVenuesLoading ||
                                  current is MembershipVenuesFailure ||
                                  current is MembershipVenuesLoaded) {
                                return true;
                              }
                              return false;
                            },
                            builder: (ctx, state) {
                              if (activeTab == 'membership') {
                                if (state is MembershipVenuesLoaded) {
                                  venueMembershipData =
                                      state.membershipVenueList;

                                  // load more
                                  if (venueMembershipData.length < 10) {
                                    hasMoreMembership = false;
                                  }

                                  return _buildMembershipVenueContent(
                                      membershipVenueList:
                                          state.membershipVenueList);
                                } else {
                                  return _buildMembershipVenueContent(
                                      isLoading: true);
                                }
                              } else if (activeTab == 'booking') {
                                if (state is MembershipVenuesLoaded) {
                                  memberships = state.membershipVenueList;

                                  return SizedBox(width: 0);
                                }
                              } else {
                                return SizedBox(width: 0);
                              }
                            },
                          ),
                          BlocBuilder<VenueDetailBloc, VenueDetailState>(
                            bloc: communitiesBloc,
                            buildWhen: (previous, current) {
                              if (current is CommunitiesLoading ||
                                  current is CommunitiesFailure ||
                                  current is CommunitiesLoaded) {
                                return true;
                              }
                              return false;
                            },
                            builder: (ctx, state) {
                              if (activeTab == 'komunitas') {
                                if (state is CommunitiesLoaded) {
                                  venueCommunityData = state.communityVenueList;

                                  // load more
                                  if (venueCommunityData.length < 10) {
                                    hasMoreCommunity = false;
                                  }

                                  return _buildCommunity(
                                      communityVenueList:
                                          state.communityVenueList);
                                } else {
                                  return _buildCommunity(isLoading: true);
                                }
                              } else {
                                return SizedBox(width: 0);
                              }
                            },
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                Align(
                  child: AnimatedContainer(
                    // height: _showAppbar ? 80.0 : 0.0,
                    height: (screenHeight * 13 / 100 < 80)
                        ? 80.0
                        : screenHeight * 13 / 100,
                    duration: Duration(milliseconds: 500),
                    child: Container(
                      width: double.infinity,
                      height: (screenHeight * 13 / 100 < 80)
                          ? 80.0
                          : screenHeight * 13 / 100,
                      color: _showAppbar
                          ? ColorBase.primaryWhite
                          : Colors.transparent,
                      child: AppBar(
                        leading: _showAppbar
                            ? IconButton(
                                icon: Icon(
                                  Icons.keyboard_arrow_left,
                                  color: ColorBase.black100,
                                ),
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                              )
                            : GestureDetector(
                                onTap: () {
                                  Navigator.pop(context);
                                },
                                child: Container(
                                    margin: EdgeInsets.only(left: 16, right: 8),
                                    height: 32,
                                    width: 32,
                                    child: Image.asset(
                                      'assets/images/ver3/navigation-bg-white.png',
                                    )),
                              ),
                        titleSpacing: 0,
                        backgroundColor: _showAppbar
                            ? ColorBase.primaryWhite
                            : Colors.transparent,
                        elevation: 0.0,
                        title: (_showAppbar)
                            ? Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    venueName,
                                    style: TextStyle(
                                      color: ColorBase.primaryBlack,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 18,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              )
                            : SizedBox(height: 0),
                        actions: [
                          if (shareUrl != '')
                            Padding(
                              padding: EdgeInsets.only(right: 12),
                              child: GestureDetector(
                                onTap: () {
                                  GeneralShareModal(
                                      context: context,
                                      shareTitle: context.formatString(
                                        AppLocale.bagikanVenue,
                                        [],
                                      ),
                                      url: shareUrl,
                                      whatsappBody: '');
                                },
                                child: _showAppbar
                                    ? Container(
                                        height: 20,
                                        width: 20,
                                        child: SvgPicture.asset(
                                          'assets/images/ver3/svg/share.svg',
                                          fit: BoxFit.contain,
                                          color: ColorBase.primaryBlack,
                                        ),
                                      )
                                    : Container(
                                        height: 32,
                                        width: 32,
                                        child: Image.asset(
                                          'assets/images/ver3/share-bg-white.png',
                                        )),
                              ),
                            ),
                          GestureDetector(
                            onTap: () {
                              if (isVenueFavorite) {
                                BlocProvider.of<VenueFavoriteBloc>(context).add(
                                    DeleteVenueFavoriteEvent(
                                        widget.venueId, context));

                                setState(() {
                                  isVenueFavorite = false;
                                  isVenueFavoriteAdd = false;
                                });
                              } else {
                                BlocProvider.of<VenueFavoriteBloc>(context).add(
                                    AddVenueFavoriteEvent(
                                        widget.venueId, context));

                                setState(() {
                                  isVenueFavorite = true;
                                  isVenueFavoriteAdd = true;

                                  customFlutterToastNavigator(
                                      context: context,
                                      msg: context.formatString(
                                        AppLocale.tambahVenueFavorit,
                                        [],
                                      ),
                                      customToastTypeNavigator:
                                          CustomToastTypeNavigator.INFO,
                                      venueId: widget.venueId);
                                });
                              }
                            },
                            child: _showAppbar
                                ? isVenueFavorite
                                    ? Container(
                                        margin: EdgeInsets.only(right: 12),
                                        height: 20,
                                        width: 20,
                                        child: Image.asset(
                                          'assets/images/ver3/heart-filled.png',
                                        ))
                                    : Container(
                                        height: 20,
                                        width: 20,
                                        margin: EdgeInsets.only(right: 12),
                                        child: SvgPicture.asset(
                                          'assets/images/ver3/svg/heart-line.svg',
                                          fit: BoxFit.contain,
                                          color: ColorBase.primaryBlack,
                                        ),
                                      )
                                : Container(
                                    margin: EdgeInsets.only(right: 12),
                                    height: 32,
                                    width: 32,
                                    child: Image.asset(
                                      isVenueFavorite
                                          ? 'assets/images/ver3/heart-filled-bg-white.png'
                                          : 'assets/images/ver3/heart-line-bg-white.png',
                                    )),
                          ),
                          GestureDetector(
                            onTap: () {
                              ReportBlockBottomSheetWidget(
                                subject: "Venue",
                                context: context,
                                refId: widget.venueId,
                                refType: "VENUE",
                                confirmMessage: "Venue " +
                                    venueName +
                                    " ${context.formatString(
                                      AppLocale.blokirSubtitle,
                                      [],
                                    )}",
                              );
                              // _actionModal(context, screenWidth, screenHeight);
                            },
                            child: _showAppbar
                                ? Container(
                                    height: 20,
                                    width: 20,
                                    margin: EdgeInsets.only(right: 12),
                                    child: SvgPicture.asset(
                                      'assets/images/ver3/svg/flag.svg',
                                      fit: BoxFit.contain,
                                      color: ColorBase.primaryBlack,
                                    ),
                                  )
                                : Container(
                                    margin: EdgeInsets.only(right: 12),
                                    height: 32,
                                    width: 32,
                                    child: Image.asset(
                                      'assets/images/ver3/flag-bg-white.png',
                                    )),
                          ),
                          SizedBox(width: 10),
                        ],
                      ),
                    ),
                  ),
                  alignment: Alignment.topCenter,
                ),
                if (isMode2)
                  Positioned(
                    top: AppBar().preferredSize.height + 26,
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 12, left: 0, right: 0, bottom: 0),
                      color: ColorBase.primaryWhite,
                      width: screenWidth,
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              color: ColorBase.black10,
                            ),
                          ),
                        ),
                        child: SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.only(top: 0, left: 0),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    for (int x = 0; x < tab.length; x++)
                                      GestureDetector(
                                        onTap: () {
                                          setState(() {
                                            for (var i = 0;
                                                i < tab.length;
                                                i++) {
                                              tab[i]['is_active'] = false;
                                            }
                                            tab[x]['is_active'] = true;
                                            activeTab = tab[x]['value'];
                                          });

                                          _scrollBottomBarController.animateTo(
                                            0.0,
                                            duration: const Duration(
                                                milliseconds: 300),
                                            curve: Curves.ease,
                                          );
                                        },
                                        child: Container(
                                          alignment: Alignment.center,
                                          // width: (screenWidth / 4),
                                          padding: EdgeInsets.only(
                                              bottom: 8, left: 32, right: 32),
                                          decoration: BoxDecoration(
                                              color: Colors.transparent,
                                              border: Border(
                                                  bottom: BorderSide(
                                                      width: 1,
                                                      color: tab[x]['is_active']
                                                          ? ColorBase.black100
                                                          : Colors
                                                              .transparent))),
                                          child: Text(
                                            tab[x]['name'] == 'Berhasil'
                                                ? context.formatString(
                                                    AppLocale.berhasil,
                                                    [],
                                                  )
                                                : tab[x]['name'] == 'Pending'
                                                    ? context.formatString(
                                                        AppLocale.pending,
                                                        [],
                                                      )
                                                    : tab[x]['name'],
                                            textAlign: TextAlign.center,
                                            style: TextStyle(
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                              fontWeight: tab[x]['is_active']
                                                  ? FontWeight.w500
                                                  : FontWeight.w400,
                                              color: tab[x]['is_active']
                                                  ? ColorBase.black100
                                                  : ColorBase.black60,
                                            ),
                                          ),
                                        ),
                                      ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
              ],
            ),
          ),
        ));
  }

  Widget _buildRescheduleRefundContent({bool isLoading = false}) {
    double screenWidth = MediaQuery.of(context).size.width;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          child: isLoading
              ? Skeleton(
                  width: 75,
                  height: 24,
                )
              : Row(
                  children: [
                    Text(
                      context.formatString(
                        AppLocale.reschedule_pembatalan,
                        [],
                      ),
                      style: TextStyle(
                        color: ColorBase.black100,
                        fontFamily: 'Rubik',
                        fontSize: ScreenUtil().scaleText * 16,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
        ),
        SizedBox(height: 12),
        Container(
          width: screenWidth - 32,
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
              color: Color(0xFFF1F1F1),
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: ColorBase.black40)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 14,
                width: 14,
                child: SvgPicture.asset(
                  'assets/images/info-black.svg',
                  fit: BoxFit.contain,
                  color: ColorBase.black80,
                ),
              ),
              SizedBox(width: 8),
              Container(
                width: screenWidth - 86,
                child: Text(
                  context.formatString(
                    AppLocale.rescheduleRefundWarningNew,
                    [],
                  ),
                  style: TextStyle(
                    fontFamily: 'Rubik',
                    fontSize: ScreenUtil().scaleText * 12,
                    color: ColorBase.black80,
                  ),
                  maxLines: 10,
                ),
              ),
            ],
          ),
        ),
        SizedBox(height: 12),
        Container(
          width: screenWidth - 32,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 18,
                width: 18,
                child: Center(
                  child: ClipOval(
                    child: Container(
                      height: 16,
                      width: 16,
                      child: Image.asset(
                          'assets/images/ver2/arrow-grey-new.png',
                          fit: BoxFit.cover),
                    ),
                  ),
                ),
              ),
              SizedBox(width: 12),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: screenWidth - 16 * 4 - 30,
                    child: Text(
                      (reschedulePolicy > 0)
                          ? context.formatString(
                              AppLocale.kebijakanRefundScheduleDef,
                              [reschedulePolicy.toString()],
                            )
                          : context.formatString(
                              AppLocale.kebijakanRefundScheduleDefNo,
                              [],
                            ),
                      style: TextStyle(
                        color: ColorBase.black80,
                        fontFamily: 'Rubik',
                        fontSize: ScreenUtil().scaleText * 12,
                      ),
                    ),
                  ),
                  SizedBox(height: 6),
                ],
              ),
            ],
          ),
        ),
        Container(
          width: screenWidth - 32,
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 12),
            child: DottedLine(dashColor: ColorBase.black10),
          ),
        ),
        for (var i = 0; i < 1; i++)
          Container(
            width: screenWidth - 32,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 18,
                  width: 18,
                  child: Center(
                    child: ClipOval(
                      child: Container(
                        height: 16,
                        width: 16,
                        child: Image.asset(
                            cancelPolicy.policies[i].color == '00C48C'
                                ? 'assets/images/ver2/arrow-green-new.png'
                                : cancelPolicy.policies[i].color == 'FCB145'
                                    ? 'assets/images/ver2/arrow-yellow-new.png'
                                    : 'assets/images/ver2/arrow-red-new.png',
                            fit: BoxFit.cover),
                      ),
                    ),
                  ),
                ),
                SizedBox(width: 12),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: screenWidth - 16 * 4 - 30,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            _getCancelPolicyDescription(
                                cancelPolicy.policies[i].percentage),
                            style: TextStyle(
                              color: ColorBase.black80,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 12,
                            ),
                          ),
                          if (cancelPolicy.name ==
                              VenueBookingConstant.cancelPolicyStrict)
                            SizedBox(height: 12),
                          if (cancelPolicy.name ==
                              VenueBookingConstant.cancelPolicyStrict)
                            Text(
                              context.formatString(
                                  AppLocale.tidak_berlaku_refund, []),
                              style: TextStyle(
                                color: ColorBase.primaryRed,
                                fontFamily: 'Rubik',
                                fontSize: ScreenUtil().scaleText * 12,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                        ],
                      ),
                    ),
                    SizedBox(height: 6),
                    if (cancelPolicy.policies[i].percentage > 0)
                      Text(
                        cancelPolicy.policies[i].percentage.toString() +
                            '% Refund',
                        style: TextStyle(
                          color: Color(int.parse(
                              "0xff${cancelPolicy.policies[i].color}")),
                          fontFamily: 'Rubik',
                          fontSize: ScreenUtil().scaleText * 12,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                  ],
                ),
              ],
            ),
          ),
        SizedBox(height: 12),
        GestureDetector(
          onTap: () {
            _cancelPolicyModal(context, screenWidth);
          },
          child: Container(
            height: 34,
            width: screenWidth - 32,
            alignment: Alignment.center,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                border: Border.all(
                    color: ColorBase.black10,
                    width: 1,
                    style: BorderStyle.solid)),
            child: Text(
              context.formatString(
                AppLocale.lihatSelengkapnya,
                [],
              ),
              style: TextStyle(
                color: ColorBase.black100,
                fontFamily: 'Rubik',
                fontWeight: FontWeight.w500,
                fontSize: ScreenUtil().scaleText * 14,
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildOtherVenuesContent(
      {bool isLoading = false, List<OtherVenue> otherVenueList}) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: screenWidth - 32,
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 16),
            child: DottedLine(dashColor: ColorBase.black10),
          ),
        ),
        Container(
          child: isLoading
              ? Skeleton(
                  width: 75,
                  height: 24,
                )
              : Row(
                  children: [
                    Text(
                      context.formatString(
                        AppLocale.venueTerdekatSectionTitle,
                        [],
                      ),
                      style: TextStyle(
                        color: ColorBase.black100,
                        fontFamily: 'Rubik',
                        fontSize: ScreenUtil().scaleText * 16,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
        ),
        SizedBox(height: 16),
        if (!isLoading)
          Container(
            margin: EdgeInsets.only(bottom: 12),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  for (int i = 0; i < otherVenueList.length; i++)
                    _buildGridVenueItem(
                        context,
                        otherVenueList[i],
                        context.formatString(
                          AppLocale.mulai,
                          [],
                        )),
                ],
              ),
            ),
          ),
        if (!isLoading)
          GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, VenueListScreen.routeName);
            },
            child: Container(
              height: 34,
              width: screenWidth - 32,
              margin: EdgeInsets.symmetric(horizontal: 16),
              padding: EdgeInsets.all(8),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(
                      color: ColorBase.black10,
                      width: 1,
                      style: BorderStyle.solid)),
              child: Text(
                context.formatString(
                  AppLocale.cekVenueLainnya,
                  [],
                ),
                style: TextStyle(
                  color: ColorBase.black100,
                  fontFamily: 'Rubik',
                  fontWeight: FontWeight.w500,
                  fontSize: ScreenUtil().scaleText * 14,
                ),
              ),
            ),
          ),
        if (!isLoading) SizedBox(height: 16),
      ],
    );
  }

  Widget _buildGridVenueItem(context, OtherVenue venue, String mulai) {
    double screenWidth = MediaQuery.of(context).size.width;

    return GestureDetector(
      onTap: () {
        Navigator.of(context).pushNamed(VenueDetailScreen.routeName,
            arguments: {'venue_id': venue.id});
      },
      child: Container(
        margin: EdgeInsets.only(right: 8, top: 4, bottom: 4),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Color.fromRGBO(37, 40, 43, 0.08),
              offset: Offset(0.0, 1.0),
              blurRadius: 6.0,
            ),
          ],
        ),
        width: 148,
        height: 286,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Stack(
              alignment: Alignment.topCenter,
              children: [
                Container(
                  width: double.infinity,
                  height: 116,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: ColorBase.black10,
                  ),
                  child: ClipRRect(
                    borderRadius:
                        BorderRadius.vertical(top: Radius.circular(8)),
                    child: CachedNetworkImage(
                      imageUrl: BaseUrlConfig.baseAssetUrl + venue.image,
                      placeholder: (context, url) => Skeleton(),
                      errorWidget: (context, url, error) => Container(
                        height: 20,
                        width: 20,
                        child: SvgPicture.asset(
                          'assets/icons/image-broken.svg',
                          height: 20,
                          width: 20,
                        ),
                      ),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Positioned(
                  top: 4,
                  left: 4,
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4),
                      color: Color.fromRGBO(37, 40, 43, 0.80),
                    ),
                    padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Container(
                          height: 10,
                          width: 10,
                          child: SvgPicture.asset(
                            'assets/images/ver3/svg/location-new.svg',
                            fit: BoxFit.cover,
                            color: ColorBase.primaryWhite,
                          ),
                        ),
                        SizedBox(
                          width: 2,
                        ),
                        Container(
                          // width: 134,
                          // padding: EdgeInsets.symmetric(horizontal: 8),
                          child: Text(
                            '${Helpers.shortCityname(Helpers.capitalizeString(venue.city.toLowerCase()))}',
                            style: TextStyle(
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 9,
                              color: ColorBase.primaryWhite,
                              // height: 1.4,
                              fontWeight: FontWeight.w500,
                            ),
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        SizedBox(
                          width: 2,
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 8),
            Container(
              height: 154,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // SizedBox(height: 8),
                      Container(
                        width: 134,
                        padding: EdgeInsets.symmetric(horizontal: 8),
                        child: Text(
                          venue.name,
                          style: TextStyle(
                            fontFamily: 'Rubik',
                            fontSize: ScreenUtil().scaleText * 14,
                            color: ColorBase.black100,
                            height: 1.4,
                            fontWeight: FontWeight.w500,
                          ),
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      SizedBox(height: 6),
                      Row(
                        children: [
                          if (double.parse(venue.currentRating.toString()) <
                                  4 &&
                              venue.totalReview.toInt() < 10) ...[
                            SizedBox(
                              height: 16,
                            ),
                          ] else ...[
                            if (double.parse(venue.currentRating.toString()) >
                                0)
                              SizedBox(
                                width: 8,
                              ),
                            if (double.parse(venue.currentRating.toString()) >
                                0)
                              Image(
                                image: AssetImage('assets/images/rating.png'),
                                height: 12,
                                width: 12,
                              ),
                            if (double.parse(venue.currentRating.toString()) >
                                0)
                              Text(
                                ' ${double.parse(venue.currentRating.toString()).toStringAsFixed(1)}',
                                style: TextStyle(
                                  fontSize: ScreenUtil().scaleText * 12,
                                  fontFamily: 'Rubik',
                                  height: 1.4,
                                  color: ColorBase.secondaryOrange,
                                ),
                              ),
                            if (double.parse(venue.totalReview.toString()) > 0)
                              Text(
                                ' (${venue.totalReview.toString()})',
                                style: TextStyle(
                                  fontSize: ScreenUtil().scaleText * 12,
                                  fontFamily: 'Rubik',
                                  height: 1.4,
                                  color: ColorBase.black60,
                                ),
                              ),
                            if (!(double.parse(venue.currentRating.toString()) >
                                0))
                              SizedBox(
                                height: 16,
                              )
                          ],
                        ],
                      ),
                      SizedBox(
                        height: 8,
                      ),
                      SizedBox(height: 8),
                      if (venue.isDpAllowed == 1)
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 7.0),
                          child: Wrap(
                            runSpacing: 4.0,
                            // clipBehavior: Clip.hardEdge,
                            // spacing: 2.0,

                            direction: Axis.horizontal,
                            children: [
                              if (venue.isDpAllowed == 1)
                                Padding(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 1.0),
                                  child: Image.asset(
                                    'assets/images/ver3/venue_dp.png',
                                    width: 47,
                                    height: 16,
                                  ),
                                ),
                              if (venue.popularity > venue.popularityAvg)
                                Padding(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 1.0),
                                  child: Image.asset(
                                    'assets/images/ver3/popular-tag.png',
                                    width: 47,
                                    height: 16,
                                  ),
                                ),
                              if (venue.cancelPolicyId == 1)
                                Padding(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 1.0),
                                  child: Image.asset(
                                    'assets/images/ver3/refund-tag.png',
                                    width: 69,
                                    height: 16,
                                  ),
                                ),
                            ],
                          ),
                        )
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: 130,
                        padding: EdgeInsets.symmetric(horizontal: 8),
                        child: Text(
                          venue.lowestStrikePrice > venue.basePrice
                              ? 'Rp${venue.lowestStrikePrice != null ? Helpers.formatRupiah(venue.lowestStrikePrice.toString()) : 0}'
                              : '',
                          style: TextStyle(
                            fontSize: ScreenUtil().scaleText * 11,
                            fontFamily: 'Rubik',
                            height: 1.4,
                            decoration: TextDecoration.lineThrough,
                            color: ColorBase.black60,
                          ),
                          overflow: TextOverflow.clip,
                          maxLines: 1,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
                        child: Row(
                          children: [
                            Text(
                              '${mulai} ',
                              style: TextStyle(
                                fontSize: ScreenUtil().scaleText * 11,
                                fontFamily: 'Rubik',
                                height: 1.4,
                                color: ColorBase.black100,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                            Container(
                              // margin: EdgeInsets.only(left: 2),
                              // width: 84,
                              // padding: EdgeInsets.symmetric(horizontal: 8),
                              child: Text(
                                'Rp${venue.basePrice != null ? Helpers.formatRupiah(venue.basePrice.toString()) : 0},-',
                                style: TextStyle(
                                  fontSize: ScreenUtil().scaleText * 12,
                                  fontFamily: 'Rubik',
                                  height: 1.4,
                                  color: ColorBase.black100,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
            SizedBox(
              height: 8,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCommunity(
      {bool isLoading = false, List<VenueCommunityData> communityVenueList}) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;

    return isLoading
        ? Container(
            width: screenWidth - 32,
            margin: EdgeInsets.only(left: 16, top: 6),
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Skeleton(width: (screenWidth - 40) * 0.5, height: 30),
                  SizedBox(width: 8),
                  Skeleton(width: (screenWidth - 40) * 0.5, height: 30),
                ],
              ),
              SizedBox(height: 8),
              Skeleton(width: screenWidth - 32, height: 50),
              SizedBox(height: 8),
              Skeleton(width: screenWidth - 32, height: 50),
              SizedBox(height: 8),
              Skeleton(width: screenWidth - 32, height: 50),
              SizedBox(height: 8),
              Skeleton(width: screenWidth - 32, height: 50),
              SizedBox(height: 8),
              Skeleton(width: screenWidth - 32, height: 50),
              SizedBox(height: 8),
              Skeleton(width: screenWidth - 32, height: 50),
            ]),
          )
        : Container(
            padding: EdgeInsets.symmetric(horizontal: 12),
            constraints: BoxConstraints(minHeight: screenHeight * 0.6),
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(
                    color: ColorBase.primaryWhite,
                    width: 0,
                    style: BorderStyle.none)),
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Container(
                margin: EdgeInsets.only(bottom: 16),
                child: Row(
                  children: [
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          _isApplySortCommunityButtonShown = false;
                          _currentSortCommunityRadio = _sortCommunityRadio;
                        });
                        sortCommunityModal(context);
                      },
                      child: Container(
                          padding:
                              EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                          decoration: BoxDecoration(
                              color: ColorBase.primaryWhite,
                              borderRadius: BorderRadius.circular(8),
                              border: Border.all(
                                  color: ColorBase.black10,
                                  style: BorderStyle.solid,
                                  width: 1)),
                          child: Row(
                            children: [
                              Text(
                                sortCommunity == 'is_most_members'
                                    ? context.formatString(
                                        AppLocale.anggotaTerbanyak, [])
                                    : context.formatString(
                                        AppLocale.komunitasTerbaru, []),
                                style: TextStyle(
                                    color: ColorBase.black80,
                                    fontFamily: 'Rubik',
                                    fontSize: ScreenUtil().scaleText * 14,
                                    fontWeight: FontWeight.w400,
                                    height: 1.4),
                              ),
                              SizedBox(width: 4),
                              Container(
                                height: 16,
                                width: 16,
                                child: Image.asset(
                                  'assets/images/ver3/chevron-down.png',
                                  fit: BoxFit.contain,
                                ),
                              ),
                            ],
                          )),
                    ),
                    SizedBox(width: 8),
                    GestureDetector(
                      onTap: () async {
                        setState(() {
                          SportSelectorVenueDetailModal(
                              categoryName: sportCategoryName,
                              categoryId: sports,
                              theContext: context,
                              allSPort: allSport,
                              myPref: myPref,
                              updateSport: updateSport,
                              venueName: venueName,
                              venueId: widget.venueId);
                        });
                      },
                      child: Container(
                          padding:
                              EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                          decoration: BoxDecoration(
                              color: newSportFilter > 0
                                  ? ColorBase.black10
                                  : ColorBase.primaryWhite,
                              borderRadius: BorderRadius.circular(8),
                              border: Border.all(
                                  color: ColorBase.black10,
                                  style: BorderStyle.solid,
                                  width: 1)),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text(
                                newSportFilter > 0
                                    ? context
                                        .formatString(AppLocale.olahraga, [])
                                    : context.formatString(
                                        AppLocale.semua_olahraga, []),
                                style: TextStyle(
                                    color: ColorBase.black80,
                                    fontFamily: 'Rubik',
                                    fontSize: ScreenUtil().scaleText * 14,
                                    fontWeight: FontWeight.w400,
                                    height: 1.4),
                              ),
                              if (newSportFilter > 0) SizedBox(width: 4),
                              if (newSportFilter > 0)
                                ConstrainedBox(
                                  constraints: BoxConstraints(
                                    minHeight: 12,
                                    minWidth: 12,
                                    maxWidth: 30,
                                  ),
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                        vertical: 2, horizontal: 4),
                                    decoration: BoxDecoration(
                                        color: ColorBase.black100,
                                        shape: BoxShape.rectangle,
                                        borderRadius: BorderRadius.circular(4)),
                                    child: Text(
                                      newSportFilter.toString(),
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontFamily: 'Rubik',
                                        fontSize: ScreenUtil().scaleText * 9,
                                        fontWeight: FontWeight.w500,
                                      ),
                                      textAlign: TextAlign.center,
                                    ),
                                  ),
                                ),
                              SizedBox(width: 4),
                              Container(
                                height: 16,
                                width: 16,
                                child: Image.asset(
                                  'assets/images/ver3/chevron-down.png',
                                  fit: BoxFit.contain,
                                ),
                              ),
                            ],
                          )),
                    ),
                  ],
                ),
              ),
              if (!isLoading)
                if (communityVenueList.length > 0)
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      for (int xx = 0; xx < communityVenueList.length; xx++)
                        GestureDetector(
                          onTap: () {
                            Navigator.pushNamed(
                                context, TeamProfileNew.routeName, arguments: {
                              'team_slug': communityVenueList[xx].slug,
                              'team_id': communityVenueList[xx].id
                            });
                          },
                          child: Container(
                            width: screenWidth - 32,
                            margin: EdgeInsets.only(bottom: 12),
                            padding: EdgeInsets.all(12),
                            decoration: BoxDecoration(
                                color: Colors.transparent,
                                borderRadius: BorderRadius.circular(8),
                                border: Border.all(color: ColorBase.black10)),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    ClipOval(
                                      child: Container(
                                          width: 48,
                                          height: 48,
                                          padding: EdgeInsets.all(2),
                                          decoration: BoxDecoration(
                                              color: Colors.white),
                                          child: RoundedTeamAvatar(
                                            width: 48,
                                            type: "team",
                                            isThumbnail: false,
                                            avatar: BaseUrlConfig.baseAssetUrl +
                                                communityVenueList[xx].logoPath,
                                          )),
                                    ),
                                    SizedBox(width: 12),
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        SizedBox(height: 4),
                                        Container(
                                          width: screenWidth * 0.7,
                                          child: Text(
                                            communityVenueList[xx].name,
                                            style: TextStyle(
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                                fontWeight: FontWeight.w500,
                                                color: ColorBase.black100,
                                                height: 1.4),
                                            overflow: TextOverflow.ellipsis,
                                            maxLines: 1,
                                          ),
                                        ),
                                        Row(
                                          children: [
                                            Container(
                                                width: 16,
                                                height: 16,
                                                child: SvgPicture.network(
                                                    BaseUrlConfig.baseAssetUrl +
                                                        communityVenueList[xx]
                                                            .svgPath,
                                                    color: ColorBase.black80)),
                                            SizedBox(width: 6),
                                            Text(
                                              communityVenueList[xx]
                                                  .categoryName,
                                              style: TextStyle(
                                                  color: ColorBase.black80,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          12),
                                            ),
                                            SizedBox(width: 4),
                                            Text(
                                              ' · ',
                                              style: TextStyle(
                                                  color: ColorBase.black80,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          12),
                                            ),
                                            SizedBox(width: 4),
                                            Text(
                                              '${context.formatString(
                                                AppLocale.totalAnggota,
                                                [
                                                  communityVenueList[xx]
                                                      .totalMember
                                                ],
                                              )}',
                                              style: TextStyle(
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          10,
                                                  fontWeight: FontWeight.w400,
                                                  color: ColorBase.black80,
                                                  height: 1.4),
                                            ),
                                          ],
                                        )
                                      ],
                                    )
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                    ],
                  ),
              if (!isLoading)
                if (communityVenueList.length == 0)
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 16),
                    width: screenWidth,
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          SizedBox(
                              height:
                                  MediaQuery.of(context).size.height * 0.05),
                          Image(
                            image: AssetImage(
                                'assets/images/ver3/empty_search.png'),
                            height: ScreenUtil().scaleText * 72,
                            fit: BoxFit.fitHeight,
                          ),
                          SizedBox(
                            height: 16,
                          ),
                          Text(
                            newSportFilter > 0
                                ? context.formatString(
                                    AppLocale.hasil_tidak_ditemukan, [])
                                : context.formatString(
                                    AppLocale.belum_ada_komunitas, []),
                            style: TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: ScreenUtil().scaleText * 16,
                              fontFamily: 'Rubik',
                              color: ColorBase.black100,
                            ),
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(
                            newSportFilter > 0
                                ? context.formatString(
                                    AppLocale.tenangKamuBisaResetFilter, [])
                                : context.formatString(
                                    AppLocale.saatIniBelumAdaKomunitas, []),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontWeight: FontWeight.w400,
                              fontSize: ScreenUtil().scaleText * 14,
                              fontFamily: 'Rubik',
                              color: ColorBase.black80,
                            ),
                          ),
                          SizedBox(
                            height: 16,
                          ),
                          if (newSportFilter > 0)
                            GestureDetector(
                              onTap: () {
                                setState(() {
                                  sportCategoryName = [];
                                });
                              },
                              child: Container(
                                  width: 144,
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 8, vertical: 8),
                                  decoration: BoxDecoration(
                                    color: ColorBase.primaryRed,
                                    borderRadius: BorderRadius.circular(8),
                                  ),
                                  child: Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(
                                        context.formatString(
                                            AppLocale.resetFilter, []),
                                        style: TextStyle(
                                            color: ColorBase.primaryWhite,
                                            fontFamily: 'Rubik',
                                            fontSize:
                                                ScreenUtil().scaleText * 14,
                                            fontWeight: FontWeight.w500,
                                            height: 1.4),
                                      ),
                                    ],
                                  )),
                            ),
                        ]),
                  ),
            ]),
          );
  }

  Widget _buildReviewContent(
      {bool isLoading = false, VenueReview venueReview}) {
    double screenWidth = MediaQuery.of(context).size.width;
    MediaQueryData queryData = MediaQuery.of(context);
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;

    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
              color: ColorBase.primaryWhite,
              width: 0,
              style: BorderStyle.none)),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        if (!isLoading)
          SingleChildScrollView(
            physics: NeverScrollableScrollPhysics(),
            controller: parentScrollController,
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 0.0),
                  child: Container(
                    padding: EdgeInsets.only(top: 8, bottom: horizontalPadding),
                    decoration: BoxDecoration(
                      color: ColorBase.primaryWhite,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                RichText(
                                  textAlign: TextAlign.start,
                                  text: TextSpan(
                                    style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 26,
                                      color: ColorBase.black100,
                                      fontFamily: 'Rubik',
                                      height: 1.4,
                                      fontWeight: FontWeight.w500,
                                    ),
                                    children: <TextSpan>[
                                      TextSpan(
                                        text: double.parse(venueReview
                                                .summary.venueRating
                                                .toString())
                                            .toStringAsFixed(1),
                                        style: TextStyle(
                                          fontSize: ScreenUtil().scaleText * 26,
                                          color: ColorBase.black100,
                                          fontFamily: 'Rubik',
                                          height: 1.4,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      TextSpan(
                                        text: '/5.0',
                                        style: TextStyle(
                                          fontSize: ScreenUtil().scaleText * 12,
                                          color: ColorBase.black60,
                                          fontFamily: 'Rubik',
                                          height: 1.4,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    SizedBox(
                                      width: 8,
                                    ),
                                    for (var i = 0; i < venueRatingStar; i++)
                                      Container(
                                          height: 16,
                                          width: 16,
                                          margin: EdgeInsets.symmetric(
                                              vertical: 12, horizontal: 2),
                                          child: Image.asset(
                                              'assets/images/ver2/star-rating-1.0.png')),
                                    if (int.parse(splitRating[1]) != 0)
                                      Container(
                                          height: 16,
                                          width: 16,
                                          margin: EdgeInsets.symmetric(
                                              vertical: 12, horizontal: 2),
                                          child: Image.asset(
                                              'assets/images/ver2/star-rating-0.${splitRating[1]}.png')),
                                    for (var i = 0;
                                        i < 5 - venueRatingStar - ratingNotFull;
                                        i++)
                                      Container(
                                          height: 16,
                                          width: 16,
                                          margin: EdgeInsets.symmetric(
                                              vertical: 12, horizontal: 2),
                                          child: Image.asset(
                                              'assets/images/ver2/star-rating-0.0.png')),
                                  ],
                                ),
                                SizedBox(width: 4),
                                Row(
                                  children: [
                                    Container(
                                      margin:
                                          EdgeInsets.symmetric(vertical: 12),
                                      child: Text(
                                        '${venueReview.summary.text.replaceAll(',', ' ·')}',
                                        style: TextStyle(
                                          fontSize: ScreenUtil().scaleText * 12,
                                          fontWeight: FontWeight.w400,
                                          height: 1.4,
                                          color: ColorBase.black60,
                                          fontFamily: 'Rubik',
                                        ),
                                      ),
                                    )
                                  ],
                                )
                              ],
                            ),
                          ],
                        ),
                        SizedBox(height: 12),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              width: screenWidth,
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    context.formatString(
                                      AppLocale.kebersihan,
                                      [],
                                    ),
                                    style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 14,
                                      color: ColorBase.black80,
                                      fontWeight: FontWeight.w400,
                                      height: 1.4,
                                      fontFamily: 'Rubik',
                                    ),
                                  ),
                                  Text(
                                    double.parse(venueReview.summary.hygiene)
                                        .toStringAsFixed(1),
                                    style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 14,
                                      color: ColorBase.black100,
                                      fontWeight: FontWeight.w400,
                                      height: 1.4,
                                      fontFamily: 'Rubik',
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: 6),
                            LinearPercentIndicator(
                              padding: EdgeInsets.only(left: 0),
                              width: screenWidth - 32,
                              lineHeight: 4.0,
                              percent: double.parse(
                                      venueReview.summary.hygiene.toString()) /
                                  5.0,
                              progressColor: ColorBase.primaryRed,
                              backgroundColor: ColorBase.black10,
                              barRadius: Radius.circular(8),
                              linearStrokeCap: LinearStrokeCap.roundAll,
                            ),
                            SizedBox(height: 14),
                            Container(
                              width: screenWidth,
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    context.formatString(
                                      AppLocale.kondisiLapangan,
                                      [],
                                    ),
                                    style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 14,
                                      color: ColorBase.black80,
                                      fontWeight: FontWeight.w400,
                                      height: 1.4,
                                      fontFamily: 'Rubik',
                                    ),
                                  ),
                                  Text(
                                    double.parse(
                                            venueReview.summary.fieldCondition)
                                        .toStringAsFixed(1),
                                    style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 14,
                                      color: ColorBase.black100,
                                      fontWeight: FontWeight.w400,
                                      height: 1.4,
                                      fontFamily: 'Rubik',
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: 6),
                            LinearPercentIndicator(
                              padding: EdgeInsets.only(left: 0),

                              width: screenWidth - 32,
                              lineHeight: 4.0,
                              percent: double.parse(venueReview
                                      .summary.fieldCondition
                                      .toString()) /
                                  5.0,
                              // progressColor: ColorBase.black100,
                              // backgroundColor: Color.fromRGBO(188, 96, 112, 1),
                              progressColor: ColorBase.primaryRed,
                              barRadius: Radius.circular(8),
                              backgroundColor: ColorBase.black10,
                              linearStrokeCap: LinearStrokeCap.roundAll,
                            ),
                            SizedBox(height: 14),
                            Container(
                              width: screenWidth,
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    context.formatString(
                                      AppLocale.komunikasi,
                                      [],
                                    ),
                                    style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 14,
                                      color: ColorBase.black80,
                                      fontWeight: FontWeight.w400,
                                      height: 1.4,
                                      fontFamily: 'Rubik',
                                    ),
                                  ),
                                  Text(
                                    double.parse(
                                            venueReview.summary.communication)
                                        .toStringAsFixed(1),
                                    style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 14,
                                      color: ColorBase.black100,
                                      fontWeight: FontWeight.w400,
                                      height: 1.4,
                                      fontFamily: 'Rubik',
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: 6),
                            LinearPercentIndicator(
                              padding: EdgeInsets.only(left: 0),

                              width: screenWidth - 32,
                              lineHeight: 4.0,
                              percent: double.parse(venueReview
                                      .summary.communication
                                      .toString()) /
                                  5.0,
                              // progressColor: ColorBase.black100,
                              // backgroundColor: Color.fromRGBO(188, 96, 112, 1),
                              progressColor: ColorBase.primaryRed,
                              backgroundColor: ColorBase.black10,
                              barRadius: Radius.circular(8),
                              linearStrokeCap: LinearStrokeCap.roundAll,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                Container(
                  //   padding: EdgeInsets.symmetric(horizontal: 16),
                  margin: EdgeInsets.only(top: 16),
                  //   height:
                  // (reviews.length == 0)? queryData.size.height - 273
                  //   queryData.size.height - 510
                  // :queryData.size.height -72

                  width: double.infinity,
                  color: Colors.white,
                  child: (venueReview.reviews.length == 0)
                      ? Container(
                          width: double.infinity,
                          child: Column(
                            children: [
                              SizedBox(
                                  height:
                                      MediaQuery.of(context).size.height / 12),
                              Image(
                                image: AssetImage(
                                    'assets/images/general-empty.png'),
                              ),
                              Text(
                                context
                                    .formatString(AppLocale.belumAdaReview, []),
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  fontSize: ScreenUtil().scaleText * 16,
                                  fontFamily: 'Rubik',
                                ),
                              ),
                            ],
                          ),
                        )
                      : Container(
                          height: queryData.size.height - 560,
                          child: ListView.builder(
                            // physics: AlwaysScrollableScrollPhysics(),
                            scrollDirection: Axis.horizontal,
                            padding: EdgeInsets.all(2),
                            itemCount: venueReview.reviews.length + 1,
                            controller: scrollController,
                            itemBuilder: (BuildContext context, int index) {
                              //
                              //
                              if (index == venueReview.reviews.length) {
                                return SizedBox(width: 0);
                              }
                              return _reviewItem(
                                  context, venueReview.reviews[index]);
                            },
                          ),
                        ),
                ),
              ],
            ),
          ),
        SizedBox(height: 8),
        isLoading
            ? Skeleton(width: screenWidth - 32, height: 34)
            : GestureDetector(
                onTap: () {
                  Navigator.of(context).pushNamed(VenueReviewScreen.routeName,
                      arguments: {
                        'venue_id': widget.venueId,
                        'venue_name': venueName
                      });
                },
                child: Container(
                  height: 34,
                  width: screenWidth - 32,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(
                          color: ColorBase.black10,
                          width: 1,
                          style: BorderStyle.solid)),
                  child: Text(
                    context.formatString(
                      AppLocale.lihatSemuaUlasan,
                      [],
                    ),
                    style: TextStyle(
                      color: ColorBase.black100,
                      fontFamily: 'Rubik',
                      fontWeight: FontWeight.w500,
                      fontSize: ScreenUtil().scaleText * 14,
                    ),
                  ),
                ),
              ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20),
          child: Divider(color: ColorBase.black10),
        ),
      ]),
    );
  }

  Widget _buildOpenPlayReviewContent(
      {bool isLoading = false, CommunityReview communityReview}) {
    double screenWidth = MediaQuery.of(context).size.width;
    MediaQueryData queryData = MediaQuery.of(context);
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;

    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
              color: ColorBase.primaryWhite,
              width: 0,
              style: BorderStyle.none)),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        if (!isLoading)
          SingleChildScrollView(
            physics: NeverScrollableScrollPhysics(),
            controller: parentScrollController,
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 0.0),
                  child: Container(
                    padding: EdgeInsets.only(top: 8, bottom: horizontalPadding),
                    decoration: BoxDecoration(
                      color: ColorBase.primaryWhite,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                RichText(
                                  textAlign: TextAlign.start,
                                  text: TextSpan(
                                    style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 26,
                                      color: ColorBase.black100,
                                      fontFamily: 'Rubik',
                                      height: 1.4,
                                      fontWeight: FontWeight.w500,
                                    ),
                                    children: <TextSpan>[
                                      TextSpan(
                                        text: double.parse(communityReview
                                                .summary.openPlayRating
                                                .toString())
                                            .toStringAsFixed(1),
                                        style: TextStyle(
                                          fontSize: ScreenUtil().scaleText * 26,
                                          color: ColorBase.black100,
                                          fontFamily: 'Rubik',
                                          height: 1.4,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      TextSpan(
                                        text: '/5.0',
                                        style: TextStyle(
                                          fontSize: ScreenUtil().scaleText * 12,
                                          color: ColorBase.black60,
                                          fontFamily: 'Rubik',
                                          height: 1.4,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    SizedBox(
                                      width: 8,
                                    ),
                                    for (var i = 0;
                                        i < venueOpenPlayRatingStar;
                                        i++)
                                      Container(
                                          height: 16,
                                          width: 16,
                                          margin: EdgeInsets.symmetric(
                                              vertical: 12, horizontal: 2),
                                          child: Image.asset(
                                              'assets/images/ver2/star-rating-1.0.png')),
                                    if (int.parse(splitRatingOpenPlay[1]) != 0)
                                      Container(
                                          height: 16,
                                          width: 16,
                                          margin: EdgeInsets.symmetric(
                                              vertical: 12, horizontal: 2),
                                          child: Image.asset(
                                              'assets/images/ver2/star-rating-0.${splitRatingOpenPlay[1]}.png')),
                                    for (var i = 0;
                                        i <
                                            5 -
                                                venueOpenPlayRatingStar -
                                                ratingNotFullOpenPlay;
                                        i++)
                                      Container(
                                          height: 16,
                                          width: 16,
                                          margin: EdgeInsets.symmetric(
                                              vertical: 12, horizontal: 2),
                                          child: Image.asset(
                                              'assets/images/ver2/star-rating-0.0.png')),
                                  ],
                                ),
                                SizedBox(width: 4),
                                Row(
                                  children: [
                                    Container(
                                      margin:
                                          EdgeInsets.symmetric(vertical: 12),
                                      child: Text(
                                        '${communityReview.summary.allCountRating} rating · ${communityReview.summary.allCountReview} ' +
                                            context.formatString(
                                              AppLocale.ulasan,
                                              [],
                                            ),
                                        style: TextStyle(
                                          fontSize: ScreenUtil().scaleText * 12,
                                          fontWeight: FontWeight.w400,
                                          height: 1.4,
                                          color: ColorBase.black60,
                                          fontFamily: 'Rubik',
                                        ),
                                      ),
                                    )
                                  ],
                                )
                              ],
                            ),
                          ],
                        ),
                        SizedBox(height: 12),
                        Container(
                          // height: 34,
                          width: screenWidth - 32,
                          padding:
                              EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              border: Border.all(
                                  color: ColorBase.black10,
                                  width: 1,
                                  style: BorderStyle.solid)),
                          child: Row(
                            children: [
                              ClipOval(
                                  child: RoundedUserAvatar(
                                      width: 32,
                                      type: "user",
                                      avatar: BaseUrlConfig.baseAssetUrl +
                                          communityReview.team.logoPath)),
                              SizedBox(width: 8),
                              Column(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      communityReview.team.name,
                                      style: TextStyle(
                                          color: ColorBase.black100,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 14,
                                          fontWeight: FontWeight.w400,
                                          height: 1.4),
                                    ),
                                    Text(
                                      'Official Host',
                                      style: TextStyle(
                                          color: ColorBase.black80,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 12,
                                          fontWeight: FontWeight.w400,
                                          height: 1.4),
                                    ),
                                  ]),
                            ],
                          ),
                        ),
                        SizedBox(height: 20),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Container(
                                        width: (screenWidth * 0.5) - 32,
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(
                                              context.formatString(
                                                AppLocale.ketepatan_waktu,
                                                [],
                                              ),
                                              style: TextStyle(
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                                color: ColorBase.black80,
                                                fontWeight: FontWeight.w400,
                                                height: 1.4,
                                                fontFamily: 'Rubik',
                                              ),
                                            ),
                                            Text(
                                              double.parse(communityReview
                                                      .summary
                                                      .openPlayPunctualityAvg)
                                                  .toStringAsFixed(1),
                                              style: TextStyle(
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                                color: ColorBase.black100,
                                                fontWeight: FontWeight.w400,
                                                height: 1.4,
                                                fontFamily: 'Rubik',
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(height: 6),
                                      LinearPercentIndicator(
                                        padding: EdgeInsets.only(left: 0),
                                        width: (screenWidth * 0.5) - 32,
                                        lineHeight: 4.0,
                                        percent: double.parse(communityReview
                                                .summary.openPlayPunctualityAvg
                                                .toString()) /
                                            5.0,
                                        progressColor: ColorBase.primaryRed,
                                        backgroundColor: ColorBase.black10,
                                        barRadius: Radius.circular(8),
                                        linearStrokeCap:
                                            LinearStrokeCap.roundAll,
                                      ),
                                    ]),
                                Column(
                                  children: [
                                    Container(
                                      width: (screenWidth * 0.5) - 32,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            context.formatString(
                                              AppLocale.sportivitas,
                                              [],
                                            ),
                                            style: TextStyle(
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                              color: ColorBase.black80,
                                              fontWeight: FontWeight.w400,
                                              height: 1.4,
                                              fontFamily: 'Rubik',
                                            ),
                                          ),
                                          Text(
                                            double.parse(communityReview.summary
                                                    .openPlaySportiveAvg)
                                                .toStringAsFixed(1),
                                            style: TextStyle(
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                              color: ColorBase.black100,
                                              fontWeight: FontWeight.w400,
                                              height: 1.4,
                                              fontFamily: 'Rubik',
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    SizedBox(height: 6),
                                    LinearPercentIndicator(
                                      padding: EdgeInsets.only(left: 0),
                                      width: (screenWidth * 0.5) - 32,
                                      lineHeight: 4.0,
                                      percent: double.parse(communityReview
                                              .summary.openPlaySportiveAvg
                                              .toString()) /
                                          5.0,
                                      progressColor: ColorBase.primaryRed,
                                      barRadius: Radius.circular(8),
                                      backgroundColor: ColorBase.black10,
                                      linearStrokeCap: LinearStrokeCap.roundAll,
                                    ),
                                  ],
                                )
                              ],
                            ),
                            SizedBox(height: 16),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Column(children: [
                                  Container(
                                    width: (screenWidth * 0.5) - 32,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          context.formatString(
                                            AppLocale.komunikasi,
                                            [],
                                          ),
                                          style: TextStyle(
                                            fontSize:
                                                ScreenUtil().scaleText * 14,
                                            color: ColorBase.black80,
                                            fontWeight: FontWeight.w400,
                                            height: 1.4,
                                            fontFamily: 'Rubik',
                                          ),
                                        ),
                                        Text(
                                          double.parse(communityReview.summary
                                                  .openPlayCommunicationAvg)
                                              .toStringAsFixed(1),
                                          style: TextStyle(
                                            fontSize:
                                                ScreenUtil().scaleText * 14,
                                            color: ColorBase.black100,
                                            fontWeight: FontWeight.w400,
                                            height: 1.4,
                                            fontFamily: 'Rubik',
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  SizedBox(height: 6),
                                  LinearPercentIndicator(
                                    padding: EdgeInsets.only(left: 0),
                                    width: (screenWidth * 0.5) - 32,
                                    lineHeight: 4.0,
                                    percent: double.parse(communityReview
                                            .summary.openPlayCommunicationAvg
                                            .toString()) /
                                        5.0,
                                    progressColor: ColorBase.primaryRed,
                                    backgroundColor: ColorBase.black10,
                                    barRadius: Radius.circular(8),
                                    linearStrokeCap: LinearStrokeCap.roundAll,
                                  ),
                                ]),
                                Column(children: [
                                  Container(
                                    width: (screenWidth * 0.5) - 32,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          context.formatString(
                                            AppLocale.pembagianWaktu,
                                            [],
                                          ),
                                          style: TextStyle(
                                            fontSize:
                                                ScreenUtil().scaleText * 14,
                                            color: ColorBase.black80,
                                            fontWeight: FontWeight.w400,
                                            height: 1.4,
                                            fontFamily: 'Rubik',
                                          ),
                                        ),
                                        Text(
                                          double.parse(communityReview
                                                  .summary.openPlayPlayTimeAvg)
                                              .toStringAsFixed(1),
                                          style: TextStyle(
                                            fontSize:
                                                ScreenUtil().scaleText * 14,
                                            color: ColorBase.black100,
                                            fontWeight: FontWeight.w400,
                                            height: 1.4,
                                            fontFamily: 'Rubik',
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  SizedBox(height: 6),
                                  LinearPercentIndicator(
                                    padding: EdgeInsets.only(left: 0),
                                    width: (screenWidth * 0.5) - 32,
                                    lineHeight: 4.0,
                                    percent: double.parse(communityReview
                                            .summary.openPlayPlayTimeAvg
                                            .toString()) /
                                        5.0,
                                    progressColor: ColorBase.primaryRed,
                                    backgroundColor: ColorBase.black10,
                                    barRadius: Radius.circular(8),
                                    linearStrokeCap: LinearStrokeCap.roundAll,
                                  ),
                                ])
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 16),
                  width: double.infinity,
                  color: Colors.white,
                  child: (communityReview.reviews.length == 0)
                      ? Container(
                          width: double.infinity,
                          child: Column(
                            children: [
                              SizedBox(
                                  height:
                                      MediaQuery.of(context).size.height / 12),
                              Image(
                                image: AssetImage(
                                    'assets/images/general-empty.png'),
                              ),
                              Text(
                                context
                                    .formatString(AppLocale.belumAdaReview, []),
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  fontSize: ScreenUtil().scaleText * 16,
                                  fontFamily: 'Rubik',
                                ),
                              ),
                            ],
                          ),
                        )
                      : Container(
                          height: queryData.size.height - 560,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            padding: EdgeInsets.all(2),
                            itemCount: communityReview.reviews.length + 1,
                            controller: scrollController,
                            itemBuilder: (BuildContext context, int index) {
                              if (index == communityReview.reviews.length) {
                                return SizedBox(width: 0);
                              }
                              return _reviewOpenPlayItem(
                                  context, communityReview.reviews[index]);
                            },
                          ),
                        ),
                ),
              ],
            ),
          ),
        SizedBox(height: 8),
        GestureDetector(
          onTap: () {
            Navigator.pushNamed(context, ReviewOpenPlayScreen.routeName,
                arguments: {
                  'slug': communityReview.team.slug,
                  'team_id': communityReview.team.id
                });
          },
          child: Container(
            height: 34,
            width: screenWidth - 32,
            alignment: Alignment.center,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                border: Border.all(
                    color: ColorBase.black10,
                    width: 1,
                    style: BorderStyle.solid)),
            child: Text(
              context.formatString(
                AppLocale.lihatSelengkapnya,
                [],
              ),
              style: TextStyle(
                color: ColorBase.black100,
                fontFamily: 'Rubik',
                fontWeight: FontWeight.w500,
                fontSize: ScreenUtil().scaleText * 14,
              ),
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20),
          child: Divider(color: ColorBase.black10),
        ),
      ]),
    );
  }

  Widget _reviewItem(BuildContext context, Review review) {
    final mediaQuery = MediaQuery.of(context);
    final screenWidth = mediaQuery.size.width;

    return Container(
      width: screenWidth - 80,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
                color: Color(0x1425282B),
                offset: Offset(0.0, 1),
                blurRadius: 6,
                spreadRadius: 0),
          ],
          border: Border.all(
              color: ColorBase.primaryWhite,
              width: 0,
              style: BorderStyle.none)),
      padding: const EdgeInsets.all(16.0),
      margin: EdgeInsets.only(bottom: 16, right: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              GestureDetector(
                onTap: () {
                  RatingDetailModalWidget(
                    context: context,
                    label: 'Rating',
                    totalRating: double.parse(review.rating),
                    ratingLabelList: [
                      'Kebersihan',
                      'Kondisi Lapangan',
                      'Komunikasi'
                    ],
                    ratingValueList: [
                      double.parse(review.hygiene.toString()),
                      double.parse(review.fieldCondition.toString()),
                      double.parse(review.communication.toString())
                    ],
                  );
                },
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Row(
                            children: [
                              ClipOval(
                                  child: RoundedUserAvatar(
                                      width: 30,
                                      type: "user",
                                      avatar: BaseUrlConfig.baseAssetUrl +
                                          review.user.avatar)),
                              SizedBox(width: 8),
                              Column(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      review.user.name,
                                      style: TextStyle(
                                          color: ColorBase.black100,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 14,
                                          fontWeight: FontWeight.w500,
                                          height: 1.4),
                                    ),
                                    Text(
                                      '${context.formatString(
                                        AppLocale.diulas,
                                        [],
                                      )}: ${reviewDate.format(DateTime.parse(review.date))}',
                                      style: TextStyle(
                                          color: ColorBase.black60,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 12,
                                          fontWeight: FontWeight.w400,
                                          height: 1.4),
                                    ),
                                  ]),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Container(
                                  padding: EdgeInsets.symmetric(
                                      vertical: 4, horizontal: 8),
                                  decoration: BoxDecoration(
                                      color: ColorBase.primaryWhite,
                                      border: Border.all(
                                          color: ColorBase.black10, width: 1),
                                      borderRadius: BorderRadius.circular(8)),
                                  child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        SvgPicture.asset(
                                          'assets/images/dashboard-rating-yellow.svg',
                                          width: 16.5,
                                          height: 15.8,
                                        ),
                                        SizedBox(width: 4),
                                        Text(
                                          double.parse(review.rating)
                                              .toStringAsFixed(1),
                                          style: TextStyle(
                                              color: ColorBase.black100,
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 12,
                                              fontWeight: FontWeight.w500),
                                        ),
                                      ])),
                            ],
                          ),
                        ],
                      ),
                      SizedBox(height: 18),
                      Container(
                        width: screenWidth - 32,
                        child: Text(
                          review.description != null ? review.description : '-',
                          style: TextStyle(
                              color: ColorBase.black80,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 14,
                              fontWeight: FontWeight.w400,
                              height: 1.4),
                          maxLines: review.isDescriptionShowedAll ? 50 : 3,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      SizedBox(height: 4),
                      Text(
                        review.fieldName.toLowerCase().contains('lapangan')
                            ? review.fieldName
                            : context.formatString(AppLocale.lapangan, []) +
                                ' : ${review.fieldName}',
                        style: TextStyle(
                            color: ColorBase.black60,
                            fontFamily: 'Rubik',
                            fontSize: ScreenUtil().scaleText * 12,
                            fontWeight: FontWeight.w400,
                            height: 1.4),
                      ),
                    ]),
              ),
              //   SizedBox(height: 10),
              //   if (review.reply != null)
              //     Stack(
              //       children: [
              //         Row(
              //           mainAxisAlignment: MainAxisAlignment.start,
              //           crossAxisAlignment: CrossAxisAlignment.center,
              //           children: [
              //             GestureDetector(
              //                 child: Container(
              //                     margin: EdgeInsets.only(top: 8),
              //                     padding: EdgeInsets.symmetric(vertical: 4),
              //                     decoration: BoxDecoration(
              //                         color: ColorBase.primaryWhite,
              //                         borderRadius: BorderRadius.circular(8)),
              //                     child: Row(
              //                       children: [
              //                         Text(
              //                             review.isReviewRepliedShowed
              //                                 ? 'Tutup Balasan'
              //                                 : 'Lihat Balasan',
              //                             style: TextStyle(
              //                               color: ColorBase.black80,
              //                               fontWeight: FontWeight.w400,
              //                               fontFamily: 'Rubik',
              //                               fontSize: 12,
              //                             )),
              //                         SizedBox(width: 4),
              //                         Icon(
              //                           review.isReviewRepliedShowed
              //                               ? Icons.keyboard_arrow_up_outlined
              //                               : Icons.keyboard_arrow_down_outlined,
              //                           size: 20,
              //                           color: ColorBase.black80,
              //                         )
              //                       ],
              //                     )),
              //                 onTap: () {
              //                   setState(() {
              //                     if (review.isReviewRepliedShowed) {
              //                       review.isReviewRepliedShowed = false;
              //                     } else {
              //                       review.isReviewRepliedShowed = true;
              //                     }
              //                   });
              //                 })
              //           ],
              //         )
              //       ],
              //     ),
              if (review.isReviewRepliedShowed)
                Container(
                    child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                        context.formatString(AppLocale.balasanDari, []) +
                            ' ${venueName}:',
                        style: TextStyle(
                            color: ColorBase.black60,
                            fontWeight: FontWeight.w500,
                            fontSize: ScreenUtil().scaleText * 12,
                            fontFamily: 'Rubik')),
                    SizedBox(height: 4),
                    Text(review.reply,
                        style: TextStyle(
                            color: ColorBase.black100,
                            fontWeight: FontWeight.w400,
                            fontSize: ScreenUtil().scaleText * 14,
                            fontFamily: 'Rubik')),
                  ],
                ))
            ],
          )
        ],
      ),
    );
  }

  Widget _reviewOpenPlayItem(BuildContext context, OpenPlayReview review) {
    final mediaQuery = MediaQuery.of(context);
    final screenWidth = mediaQuery.size.width;

    return Container(
      width: screenWidth - 80,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
                color: Color(0x1425282B),
                offset: Offset(0.0, 1),
                blurRadius: 6,
                spreadRadius: 0),
          ],
          border: Border.all(
              color: ColorBase.primaryWhite,
              width: 0,
              style: BorderStyle.none)),
      padding: const EdgeInsets.all(16.0),
      margin: EdgeInsets.only(bottom: 16, right: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              GestureDetector(
                onTap: () {
                  RatingDetailModalWidget(
                    context: context,
                    label: 'Rating',
                    totalRating: double.parse(review.rating),
                    ratingLabelList: [
                      'Ketepatan Waktu',
                      'Sportifitas',
                      'Komunikasi',
                      'Pembagian Waktu'
                    ],
                    ratingValueList: [
                      double.parse(review.ratingPunctuality.toString()),
                      double.parse(review.ratingSportive.toString()),
                      double.parse(review.ratingCommunication.toString()),
                      double.parse(review.ratingPlayTime.toString())
                    ],
                  );
                },
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Row(
                            children: [
                              ClipOval(
                                  child: RoundedUserAvatar(
                                      width: 30,
                                      type: "user",
                                      avatar: BaseUrlConfig.baseAssetUrl +
                                          review.userAvatar)),
                              SizedBox(width: 8),
                              Column(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      review.userName.length > 15
                                          ? review.userName.substring(0, 15) +
                                              '...'
                                          : review.userName,
                                      style: TextStyle(
                                          color: ColorBase.black100,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 14,
                                          fontWeight: FontWeight.w500,
                                          height: 1.4),
                                    ),
                                    Text(
                                      '${context.formatString(
                                        AppLocale.diulas,
                                        [],
                                      )}: ${reviewDate.format(DateTime.parse(review.date))}',
                                      style: TextStyle(
                                          color: ColorBase.black60,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 12,
                                          fontWeight: FontWeight.w400,
                                          height: 1.4),
                                    ),
                                  ]),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Container(
                                  padding: EdgeInsets.symmetric(
                                      vertical: 4, horizontal: 8),
                                  decoration: BoxDecoration(
                                      color: ColorBase.primaryWhite,
                                      border: Border.all(
                                          color: ColorBase.black10, width: 1),
                                      borderRadius: BorderRadius.circular(8)),
                                  child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        SvgPicture.asset(
                                          'assets/images/dashboard-rating-yellow.svg',
                                          width: 16.5,
                                          height: 15.8,
                                        ),
                                        SizedBox(width: 4),
                                        Text(
                                          double.parse(review.rating)
                                              .toStringAsFixed(1),
                                          style: TextStyle(
                                              color: ColorBase.black100,
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 12,
                                              fontWeight: FontWeight.w500),
                                        ),
                                      ])),
                            ],
                          ),
                        ],
                      ),
                      SizedBox(height: 18),
                      Container(
                        width: screenWidth - 32,
                        child: Text(
                          review.description != null ? review.description : '-',
                          style: TextStyle(
                              color: ColorBase.black80,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 14,
                              fontWeight: FontWeight.w400,
                              height: 1.4),
                          maxLines: 3,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      SizedBox(height: 4),
                      if (review.coachName != null && review.coachName != '')
                        Text(
                          'Coaching Session With ' + review.coachName,
                          style: TextStyle(
                              color: ColorBase.black60,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 12,
                              fontWeight: FontWeight.w400,
                              height: 1.4),
                        ),
                    ]),
              ),
            ],
          )
        ],
      ),
    );
  }

  Widget _buildEventVenueContent(
      {bool isLoading = false, List<VenueEventDataNew> eventVenueList}) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;

    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
              color: ColorBase.primaryWhite,
              width: 0,
              style: BorderStyle.none)),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Container(
          child: Row(
            children: [
              GestureDetector(
                  onTap: () async {
                    filterActivityModal(context, screenHeight);
                  },
                  child: Container(
                    width: 32,
                    height: 32,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(
                            color: ColorBase.black10,
                            style: BorderStyle.solid,
                            width: 1)),
                    child: Container(
                      color: ColorBase.primaryWhite,
                      child: SvgPicture.asset(
                        'assets/images/ver3/svg/filter-inactive.svg',
                        width: 32,
                        height: 32,
                      ),
                    ),
                  )),
              SizedBox(width: 6),
              Container(
                color: ColorBase.black40,
                height: 24,
                width: 1,
              ),
              SizedBox(width: 6),
              Container(
                width: screenWidth - 77,
                height: 50.0,
                child: ListView(
                  controller: calendarController,
                  physics: BouncingScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    AutoScrollTag(
                      index: 100,
                      key: ValueKey(100),
                      controller: calendarController,
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 4.0),
                        child: GestureDetector(
                          onTap: () {
                            setState(() {
                              filterDateActivity = '';
                            });

                            _loadActivity();
                          },
                          child: Container(
                              padding: EdgeInsets.only(top: 6),
                              margin: EdgeInsets.only(left: 16, right: 3),
                              alignment: Alignment.center,
                              child: RichText(
                                textAlign: TextAlign.center,
                                text: TextSpan(
                                  style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 14,
                                      fontFamily: 'Rubik',
                                      color: filterDateActivity == ''
                                          ? ColorBase.black100
                                          : ColorBase.black60,
                                      fontWeight: FontWeight.w400,
                                      height: 0.8),
                                  children: [
                                    TextSpan(
                                        text: '${context.formatString(
                                      AppLocale.semuaTanggal,
                                      [],
                                    )}\n'),
                                    TextSpan(
                                      text: '•',
                                      style: TextStyle(
                                          fontSize: 20,
                                          color: filterDateActivity == ''
                                              ? ColorBase.black100
                                              : ColorBase
                                                  .primaryWhite), // titik lebih besar sedikit
                                    ),
                                  ],
                                ),
                              )),
                        ),
                      ),
                    ),
                    if (listNewCalendar != null)
                      if (listNewCalendar.length > 0)
                        for (int x = 0; x < listNewCalendar.length; x++)
                          AutoScrollTag(
                            index: x,
                            key: ValueKey(x),
                            controller: calendarController,
                            child: Padding(
                              padding:
                                  const EdgeInsets.symmetric(vertical: 4.0),
                              child: GestureDetector(
                                onTap: () async {
                                  setState(() {
                                    filterDateActivity =
                                        DateFormat('yyyy-MM-dd')
                                            .format(listNewCalendar[x]);
                                    filterDateX = x;
                                  });

                                  _loadActivity();
                                },
                                child: Container(
                                    width: ScreenUtil().scaleText * 55,
                                    padding: EdgeInsets.only(top: 6),
                                    margin: EdgeInsets.only(
                                        left: x == 0 ? 16 : 3, right: 3),
                                    alignment: Alignment.center,
                                    child: RichText(
                                      textAlign: TextAlign.center,
                                      text: TextSpan(
                                        style: TextStyle(
                                            fontSize:
                                                ScreenUtil().scaleText * 14,
                                            fontFamily: 'Rubik',
                                            color: filterDateActivity ==
                                                    DateFormat('yyyy-MM-dd')
                                                        .format(
                                                            listNewCalendar[x])
                                                ? ColorBase.black100
                                                : ColorBase.black60,
                                            fontWeight: FontWeight.w400,
                                            height: 0.8),
                                        children: [
                                          TextSpan(
                                              text: '${isToday(listNewCalendar[x]) ? context.formatString(
                                                  AppLocale.today,
                                                  [],
                                                ) : DateFormat('EEE', 'id_ID').format(listNewCalendar[x]) == 'Sen' ? context.formatString(AppLocale.sen, []) + ' ' + DateFormat('d', 'id_ID').format(listNewCalendar[x]) : DateFormat('EEE', 'id_ID').format(listNewCalendar[x]) == 'Sel' ? context.formatString(AppLocale.sel, []) + ' ' + DateFormat('d', 'id_ID').format(listNewCalendar[x]) : DateFormat('EEE', 'id_ID').format(listNewCalendar[x]) == 'Rab' ? context.formatString(AppLocale.rab, []) + ' ' + DateFormat('d', 'id_ID').format(listNewCalendar[x]) : DateFormat('EEE', 'id_ID').format(listNewCalendar[x]) == 'Kam' ? context.formatString(AppLocale.kam, []) + ' ' + DateFormat('d', 'id_ID').format(listNewCalendar[x]) : DateFormat('EEE', 'id_ID').format(listNewCalendar[x]) == 'Jum' ? context.formatString(AppLocale.jum, []) + ' ' + DateFormat('d', 'id_ID').format(listNewCalendar[x]) : DateFormat('EEE', 'id_ID').format(listNewCalendar[x]) == 'Sab' ? context.formatString(AppLocale.sab, []) + ' ' + DateFormat('d', 'id_ID').format(listNewCalendar[x]) : DateFormat('EEE', 'id_ID').format(listNewCalendar[x]) == 'Min' ? context.formatString(AppLocale.min, []) + ' ' + DateFormat('d', 'id_ID').format(listNewCalendar[x]) : DateFormat('EEE', 'id_ID').format(listNewCalendar[x]) + ' ' + DateFormat('d', 'id_ID').format(listNewCalendar[x])}\n'),
                                          TextSpan(
                                            text: '•',
                                            style: TextStyle(
                                                fontSize: 20,
                                                color: filterDateActivity ==
                                                        DateFormat('yyyy-MM-dd')
                                                            .format(
                                                                listNewCalendar[
                                                                    x])
                                                    ? ColorBase.black100
                                                    : ColorBase
                                                        .primaryWhite), // titik lebih besar sedikit
                                          ),
                                        ],
                                      ),
                                    )),
                              ),
                            ),
                          )
                  ],
                ),
              ),
            ],
          ),
        ),
        isLoading
            ? Container(
                height: screenHeight,
                width: screenWidth - 32,
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Skeleton(width: screenWidth - 32, height: 40),
                      SizedBox(height: 8),
                      Skeleton(width: screenWidth - 32, height: 100),
                      SizedBox(height: 8),
                      Skeleton(width: screenWidth - 32, height: 100),
                      SizedBox(height: 8),
                      Skeleton(width: screenWidth - 32, height: 100),
                    ]),
              )
            : Column(
                children: [
                  if (!isLoading)
                    if (eventVenueList.length > 0)
                      Container(
                          constraints:
                              BoxConstraints(minHeight: screenHeight * 0.5),
                          child: SingleChildScrollView(
                            child: Column(children: [
                              for (int x = 0; x < eventVenueList.length; x++)
                                Stack(children: [
                                  Padding(
                                    padding: EdgeInsets.only(
                                        right: 0,
                                        top: eventVenueList[x].isCoaching == 1
                                            ? 12
                                            : 6,
                                        bottom: 0),
                                    child: Container(
                                      width: screenWidth - 32,
                                      child: Column(
                                        children: [
                                          GestureDetector(
                                            onTap: () {
                                              if (eventVenueList[x]
                                                      .sparringId ==
                                                  0) {
                                                if (eventVenueList[x]
                                                        .authorId
                                                        .toString() ==
                                                    _sharedPreferencesManager
                                                        .getString("user_id")) {
                                                  Navigator.pushNamed(
                                                      context,
                                                      OpenPlayDetailScreen
                                                          .routeName,
                                                      arguments: {
                                                        'id': eventVenueList[x]
                                                            .openPlayId,
                                                        'prev_screen':
                                                            'dashboard',
                                                        'open_play_as': 'host'
                                                      });
                                                } else {
                                                  Navigator.pushNamed(
                                                      context,
                                                      OpenPlayDetailScreen
                                                          .routeName,
                                                      arguments: {
                                                        'id': eventVenueList[x]
                                                            .openPlayId
                                                      });
                                                }
                                              } else {
                                                if (eventVenueList[x]
                                                        .authorId
                                                        .toString() ==
                                                    _sharedPreferencesManager
                                                        .getString("user_id")) {
                                                  if (eventVenueList[x]
                                                          .matchCategory !=
                                                      '') {
                                                    Navigator.pushNamed(
                                                        context,
                                                        SparringIndividualDetailScreen
                                                            .routeName,
                                                        arguments: {
                                                          'id':
                                                              eventVenueList[x]
                                                                  .sparringId,
                                                          'sparring_type':
                                                              'open',
                                                          'prev_screen':
                                                              'dashboard',
                                                          'is_from_dashboard':
                                                              true,
                                                          'match_status':
                                                              eventVenueList[x]
                                                                      .status ??
                                                                  'pending',
                                                        });
                                                  } else if (eventVenueList[x]
                                                          .awayTeamName !=
                                                      '') {
                                                    Navigator.pushNamed(
                                                        context,
                                                        SparringDetailScreen
                                                            .routeName,
                                                        arguments: {
                                                          'id':
                                                              eventVenueList[x]
                                                                  .sparringId,
                                                          'sparring_type':
                                                              'open',
                                                          'prev_screen':
                                                              'dashboard',
                                                          'from_team_id':
                                                              eventVenueList[x]
                                                                  .communityId,
                                                          'match_status':
                                                              'in_progress',
                                                          'is_invite': false,
                                                        });
                                                  } else {
                                                    Navigator.pushNamed(
                                                        context,
                                                        SparringDetailScreen
                                                            .routeName,
                                                        arguments: {
                                                          'id':
                                                              eventVenueList[x]
                                                                  .sparringId,
                                                          'sparring_type':
                                                              'open',
                                                          'prev_screen':
                                                              'dashboard',
                                                        });
                                                  }
                                                } else {
                                                  if (eventVenueList[x]
                                                          .matchCategory !=
                                                      '') {
                                                    Navigator.pushNamed(
                                                        context,
                                                        SparringIndividualDetailScreen
                                                            .routeName,
                                                        arguments: {
                                                          'id':
                                                              eventVenueList[x]
                                                                  .sparringId,
                                                          'sparring_type':
                                                              'open',
                                                          'prev_screen': 'home',
                                                        });
                                                  } else {
                                                    Navigator.pushNamed(
                                                        context,
                                                        SparringDetailScreen
                                                            .routeName,
                                                        arguments: {
                                                          'id':
                                                              eventVenueList[x]
                                                                  .sparringId,
                                                          'sparring_type':
                                                              'open',
                                                          'prev_screen': 'home',
                                                        });
                                                  }
                                                }
                                              }
                                            },
                                            child: Container(
                                              // height: eventVenueList[x].sparringId == 0 ? 262 : 196,
                                              width: screenWidth - 32,
                                              padding: EdgeInsets.symmetric(
                                                  horizontal: 16, vertical: 12),
                                              margin:
                                                  EdgeInsets.only(bottom: 16),
                                              decoration: BoxDecoration(
                                                color: Colors.white,
                                                borderRadius:
                                                    BorderRadius.circular(8),
                                                border: Border.all(
                                                    color: ColorBase.black10,
                                                    width: 1),
                                              ),
                                              child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  Row(children: [
                                                    Container(
                                                      padding:
                                                          EdgeInsets.symmetric(
                                                              horizontal: 0,
                                                              vertical: 2),
                                                      child: Row(
                                                          mainAxisSize:
                                                              MainAxisSize.min,
                                                          children: [
                                                            Text(
                                                              eventVenueList[x]
                                                                              .sparringId !=
                                                                          0 &&
                                                                      eventVenueList[x]
                                                                              .matchCategory ==
                                                                          'single'
                                                                  ? context.formatString(
                                                                          AppLocale
                                                                              .sparring,
                                                                          []) +
                                                                      ' · ' +
                                                                      context.formatString(
                                                                          AppLocale
                                                                              .tunggal,
                                                                          [])
                                                                  : eventVenueList[x].sparringId !=
                                                                              0 &&
                                                                          eventVenueList[x].matchCategory ==
                                                                              'double'
                                                                      ? context.formatString(AppLocale.sparring, []) +
                                                                          ' · ' +
                                                                          context.formatString(
                                                                              AppLocale.ganda,
                                                                              [])
                                                                      : eventVenueList[x].sparringId != 0 && eventVenueList[x].matchCategory == ''
                                                                          ? context.formatString(AppLocale.sparring, []) + ' · ' + context.formatString(AppLocale.tim, [])
                                                                          : context.formatString(AppLocale.main_bareng, []),
                                                              style: TextStyle(
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w400,
                                                                fontSize:
                                                                    ScreenUtil()
                                                                            .scaleText *
                                                                        14,
                                                                color: ColorBase
                                                                    .black60,
                                                                fontFamily:
                                                                    'Rubik',
                                                              ),
                                                            ),
                                                          ]),
                                                    ),
                                                  ]),
                                                  SizedBox(
                                                    height: 4,
                                                  ),
                                                  if (eventVenueList[x]
                                                          .sparringId !=
                                                      0)
                                                    Row(
                                                      children: [
                                                        // sparring community
                                                        if (eventVenueList[x]
                                                                .matchCategory ==
                                                            '')
                                                          ClipOval(
                                                            child: Image(
                                                              image:
                                                                  NetworkImage(
                                                                BaseUrlConfig
                                                                        .baseAssetUrl +
                                                                    eventVenueList[
                                                                            x]
                                                                        .logoPath,
                                                              ),
                                                              height: 40,
                                                              width: 40,
                                                              errorBuilder: (BuildContext
                                                                      context,
                                                                  Object
                                                                      exception,
                                                                  StackTrace
                                                                      stackTrace) {
                                                                return Image
                                                                    .asset(
                                                                  'assets/images/avatar.png',
                                                                  height: 40,
                                                                  width: 40,
                                                                );
                                                              },
                                                            ),
                                                          ),

                                                        // individual single
                                                        if (eventVenueList[x]
                                                                .matchCategory ==
                                                            'single')
                                                          Container(
                                                              height: 40,
                                                              width: 40,
                                                              margin: EdgeInsets
                                                                  .all(2),
                                                              child: RoundedUserAvatar(
                                                                  width: 40,
                                                                  avatar: BaseUrlConfig
                                                                          .baseAssetUrl +
                                                                      eventVenueList[
                                                                              x]
                                                                          .userOnePhoto,
                                                                  isThumbnail:
                                                                      true)),

                                                        // individual double
                                                        if (eventVenueList[x]
                                                                .matchCategory ==
                                                            'double')
                                                          Stack(
                                                            children: [
                                                              Container(
                                                                width: 70,
                                                                height: 44,
                                                              ),
                                                              Positioned(
                                                                left: 0,
                                                                child: ClipOval(
                                                                  child: Container(
                                                                      height:
                                                                          40,
                                                                      width: 40,
                                                                      decoration: BoxDecoration(
                                                                          border: Border.all(
                                                                              color: ColorBase
                                                                                  .primaryWhite),
                                                                          shape: BoxShape
                                                                              .circle),
                                                                      margin: EdgeInsets
                                                                          .all(
                                                                              2),
                                                                      child: RoundedUserAvatar(
                                                                          width:
                                                                              40,
                                                                          avatar: BaseUrlConfig.baseAssetUrl +
                                                                              eventVenueList[x]
                                                                                  .userOnePhoto,
                                                                          isThumbnail:
                                                                              true)),
                                                                ),
                                                              ),
                                                              Positioned(
                                                                right: 0,
                                                                child: ClipOval(
                                                                  child: Container(
                                                                      height:
                                                                          40,
                                                                      width: 40,
                                                                      decoration: BoxDecoration(
                                                                          border: Border.all(
                                                                              color: ColorBase
                                                                                  .primaryWhite),
                                                                          shape: BoxShape
                                                                              .circle),
                                                                      margin: EdgeInsets
                                                                          .all(
                                                                              2),
                                                                      child: RoundedUserAvatar(
                                                                          width:
                                                                              40,
                                                                          avatar: BaseUrlConfig.baseAssetUrl +
                                                                              eventVenueList[x]
                                                                                  .userTwoPhoto,
                                                                          isThumbnail:
                                                                              true)),
                                                                ),
                                                              ),
                                                            ],
                                                          ),

                                                        SizedBox(
                                                          width: 6,
                                                        ),
                                                        Container(
                                                          padding: EdgeInsets
                                                              .symmetric(
                                                                  horizontal: 8,
                                                                  vertical: 6),
                                                          decoration: BoxDecoration(
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          4),
                                                              color: Color(
                                                                  int.parse(
                                                                      '0xffF1F1F1'))),
                                                          child: Text(
                                                            'VS',
                                                            style: TextStyle(
                                                              color: ColorBase
                                                                  .black80,
                                                              fontFamily:
                                                                  'Rubik',
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w600,
                                                              fontStyle:
                                                                  FontStyle
                                                                      .italic,
                                                              fontSize: ScreenUtil()
                                                                      .scaleText *
                                                                  10,
                                                            ),
                                                          ),
                                                        ),
                                                        SizedBox(
                                                          width: 6,
                                                        ),
                                                        (eventVenueList[x]
                                                                    .awayTeamName !=
                                                                '')
                                                            ? ClipOval(
                                                                child: Image(
                                                                  image:
                                                                      NetworkImage(
                                                                    BaseUrlConfig
                                                                            .baseAssetUrl +
                                                                        eventVenueList[x]
                                                                            .logoAwayTeam,
                                                                  ),
                                                                  height: 40,
                                                                  width: 40,
                                                                  errorBuilder: (BuildContext
                                                                          context,
                                                                      Object
                                                                          exception,
                                                                      StackTrace
                                                                          stackTrace) {
                                                                    return Image
                                                                        .asset(
                                                                      'assets/images/avatar.png',
                                                                      height:
                                                                          40,
                                                                      width: 40,
                                                                    );
                                                                  },
                                                                ),
                                                              )
                                                            : (eventVenueList[x]
                                                                            .matchCategory ==
                                                                        'single' &&
                                                                    eventVenueList[x]
                                                                            .awayUserOnePhoto !=
                                                                        '')
                                                                ? Container(
                                                                    height: 40,
                                                                    width: 40,
                                                                    margin: EdgeInsets
                                                                        .all(2),
                                                                    child: RoundedUserAvatar(
                                                                        width:
                                                                            40,
                                                                        avatar: BaseUrlConfig.baseAssetUrl +
                                                                            eventVenueList[x]
                                                                                .awayUserOnePhoto,
                                                                        isThumbnail:
                                                                            true))
                                                                : (eventVenueList[x].matchCategory ==
                                                                            'double' &&
                                                                        eventVenueList[x].awayUserOnePhoto !=
                                                                            '')
                                                                    ? Stack(
                                                                        children: [
                                                                          Container(
                                                                            width:
                                                                                70,
                                                                            height:
                                                                                44,
                                                                          ),
                                                                          Positioned(
                                                                            left:
                                                                                0,
                                                                            child:
                                                                                ClipOval(
                                                                              child: Container(height: 40, width: 40, decoration: BoxDecoration(border: Border.all(color: ColorBase.primaryWhite), shape: BoxShape.circle), margin: EdgeInsets.all(2), child: RoundedUserAvatar(width: 40, avatar: BaseUrlConfig.baseAssetUrl + eventVenueList[x].awayUserOnePhoto, isThumbnail: true)),
                                                                            ),
                                                                          ),
                                                                          Positioned(
                                                                            right:
                                                                                0,
                                                                            child:
                                                                                ClipOval(
                                                                              child: Container(height: 40, width: 40, decoration: BoxDecoration(border: Border.all(color: ColorBase.primaryWhite), shape: BoxShape.circle), margin: EdgeInsets.all(2), child: RoundedUserAvatar(width: 40, avatar: BaseUrlConfig.baseAssetUrl + eventVenueList[x].awayUserTwoPhoto, isThumbnail: true)),
                                                                            ),
                                                                          ),
                                                                        ],
                                                                      )
                                                                    : (eventVenueList[x].matchCategory ==
                                                                            'double')
                                                                        ? Stack(
                                                                            children: [
                                                                              Container(
                                                                                width: 70,
                                                                                height: 44,
                                                                              ),
                                                                              Positioned(
                                                                                left: 0,
                                                                                child: ClipOval(
                                                                                  child: Container(
                                                                                    height: 40,
                                                                                    width: 40,
                                                                                    decoration: BoxDecoration(border: Border.all(color: ColorBase.primaryWhite), shape: BoxShape.circle),
                                                                                    margin: EdgeInsets.all(2),
                                                                                    child: SvgPicture.asset(
                                                                                      'assets/images/ver3/svg/empty-avatar.svg',
                                                                                      height: ScreenUtil().scaleText * 40,
                                                                                      width: ScreenUtil().scaleText * 40,
                                                                                    ),
                                                                                  ),
                                                                                ),
                                                                              ),
                                                                              Positioned(
                                                                                right: 0,
                                                                                child: ClipOval(
                                                                                  child: Container(
                                                                                    height: 40,
                                                                                    width: 40,
                                                                                    decoration: BoxDecoration(color: Colors.white, border: Border.all(color: ColorBase.primaryWhite), shape: BoxShape.circle),
                                                                                    margin: EdgeInsets.all(2),
                                                                                    child: SvgPicture.asset(
                                                                                      'assets/images/ver3/svg/empty-avatar.svg',
                                                                                      height: ScreenUtil().scaleText * 40,
                                                                                      width: ScreenUtil().scaleText * 40,
                                                                                    ),
                                                                                  ),
                                                                                ),
                                                                              ),
                                                                            ],
                                                                          )
                                                                        : ClipOval(
                                                                            child:
                                                                                Image.asset(
                                                                              'assets/images/ver3/empty_away_logo.png',
                                                                              height: 40,
                                                                              width: 40,
                                                                            ),
                                                                          ),
                                                      ],
                                                    ),
                                                  if (eventVenueList[x]
                                                          .sparringId !=
                                                      0)
                                                    SizedBox(
                                                      height: 4,
                                                    ),
                                                  Column(
                                                    crossAxisAlignment:
                                                        CrossAxisAlignment
                                                            .start,
                                                    children: [
                                                      Text(
                                                        eventVenueList[x]
                                                                    .sparringId ==
                                                                0
                                                            ? eventVenueList[x]
                                                                .eventName
                                                            : (eventVenueList[x]
                                                                        .awayTeamName !=
                                                                    '')
                                                                ? eventVenueList[x]
                                                                        .name +
                                                                    ' X ' +
                                                                    eventVenueList[
                                                                            x]
                                                                        .awayTeamName
                                                                : (eventVenueList[x].awayTeamName ==
                                                                            '' &&
                                                                        eventVenueList[x].matchCategory ==
                                                                            '')
                                                                    ? eventVenueList[
                                                                            x]
                                                                        .name
                                                                    : eventVenueList[x].awayUserTwoName !=
                                                                            ""
                                                                        ? (eventVenueList[x].userOneName.length > 15 ? eventVenueList[x].userOneName.substring(0, 15) + '...' : eventVenueList[x].userOneName) +
                                                                            ' & ' +
                                                                            (eventVenueList[x].userTwoName.length > 15
                                                                                ? eventVenueList[x].userTwoName.substring(0, 15) + '...'
                                                                                : eventVenueList[x].userTwoName) +
                                                                            ' · ' +
                                                                            (eventVenueList[x].awayUserOneName.length > 15 ? eventVenueList[x].awayUserOneName.substring(0, 15) + '...' : eventVenueList[x].awayUserOneName) +
                                                                            ' & ' +
                                                                            (eventVenueList[x].awayUserTwoName.length > 15 ? eventVenueList[x].awayUserTwoName.substring(0, 15) + '...' : eventVenueList[x].awayUserTwoName)
                                                                        : eventVenueList[x].awayUserOneName != ""
                                                                            ? (eventVenueList[x].userOneName.length > 15 ? eventVenueList[x].userOneName.substring(0, 15) + '...' : eventVenueList[x].userOneName) + ' · ' + (eventVenueList[x].awayUserOneName.length > 15 ? eventVenueList[x].awayUserOneName.substring(0, 15) + '...' : eventVenueList[x].awayUserOneName)
                                                                            : eventVenueList[x].userTwoName != ""
                                                                                ? (eventVenueList[x].userOneName.length > 15 ? eventVenueList[x].userOneName.substring(0, 15) + '...' : eventVenueList[x].userOneName) + ' & ' + (eventVenueList[x].userTwoName.length > 15 ? eventVenueList[x].userTwoName.substring(0, 15) + '...' : eventVenueList[x].userTwoName)
                                                                                : eventVenueList[x].userOneName.length > 15
                                                                                    ? eventVenueList[x].userOneName.substring(0, 15) + '...'
                                                                                    : eventVenueList[x].userOneName,
                                                        style: TextStyle(
                                                          fontFamily: 'Rubik',
                                                          fontSize: ScreenUtil()
                                                                  .scaleText *
                                                              14,
                                                          fontWeight:
                                                              FontWeight.w500,
                                                          color: ColorBase
                                                              .black100,
                                                          height: 1.4,
                                                        ),
                                                        maxLines: 2,
                                                        overflow: TextOverflow
                                                            .ellipsis,
                                                      ),
                                                      SizedBox(height: 4),
                                                      Row(
                                                          mainAxisSize:
                                                              MainAxisSize.min,
                                                          children: [
                                                            Container(
                                                              width: 16,
                                                              height: 16,
                                                              child: SvgPicture
                                                                  .network(
                                                                '${BaseUrlConfig.baseAssetUrl}' +
                                                                    Helpers.findValueOnArray(
                                                                        array:
                                                                            sportImageList,
                                                                        findKey:
                                                                            'id',
                                                                        findValue:
                                                                            eventVenueList[x]
                                                                                .categoryId,
                                                                        keyValue:
                                                                            'image'),
                                                                fit: BoxFit
                                                                    .cover,
                                                                color: ColorBase
                                                                    .black80,
                                                              ),
                                                            ),
                                                            SizedBox(
                                                              width: 4,
                                                            ),
                                                            Text(
                                                              eventVenueList[x]
                                                                              .level !=
                                                                          null &&
                                                                      eventVenueList[x]
                                                                              .level
                                                                              .length >
                                                                          0
                                                                  ? eventVenueList[x]
                                                                              .level
                                                                              .length ==
                                                                          5
                                                                      ? '${eventVenueList[x].categoryName} · ' +
                                                                          (eventVenueList[x].openPlayGender != null
                                                                              ? eventVenueList[x].openPlayGender == 'pria'
                                                                                  ? context.formatString(AppLocale.laki_laki, []) + ', '
                                                                                  : context.formatString(AppLocale.perempuan, []) + ', '
                                                                              : '') +
                                                                          context.formatString(AppLocale.semua_level, [])
                                                                      : '${eventVenueList[x].categoryName} · ' +
                                                                          (eventVenueList[x].openPlayGender != null
                                                                              ? eventVenueList[x].openPlayGender == 'pria'
                                                                                  ? context.formatString(AppLocale.laki_laki, []) + ', '
                                                                                  : context.formatString(AppLocale.perempuan, []) + ', '
                                                                              : '') +
                                                                          '${Helpers.skillFormat(context: context, skillArray: eventVenueList[x].level, isShowMoreThan3: false)}'
                                                                  : '${eventVenueList[x].categoryName} · ' +
                                                                      (eventVenueList[x].openPlayGender != null
                                                                          ? eventVenueList[x].openPlayGender == 'pria'
                                                                              ? context.formatString(AppLocale.laki_laki, []) + ', '
                                                                              : context.formatString(AppLocale.perempuan, []) + ', '
                                                                          : '') +
                                                                      context.formatString(AppLocale.semua_level, []),
                                                              style: TextStyle(
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w400,
                                                                fontSize:
                                                                    ScreenUtil()
                                                                            .scaleText *
                                                                        12,
                                                                color: ColorBase
                                                                    .black80,
                                                                fontFamily:
                                                                    'Rubik',
                                                              ),
                                                            ),
                                                          ]),
                                                      SizedBox(height: 4),
                                                      if (eventVenueList[x]
                                                              .sparringId ==
                                                          0)
                                                        Row(
                                                            mainAxisSize:
                                                                MainAxisSize
                                                                    .min,
                                                            crossAxisAlignment:
                                                                CrossAxisAlignment
                                                                    .start,
                                                            children: [
                                                              SvgPicture.asset(
                                                                  'assets/images/ver3/svg/calendar_mini.svg',
                                                                  width: 16,
                                                                  height: 16),
                                                              SizedBox(
                                                                  width: 4),
                                                              Container(
                                                                width:
                                                                    screenWidth -
                                                                        90,
                                                                child: (eventVenueList[x].onlinePrice +
                                                                            eventVenueList[x].offlinePrice ==
                                                                        0)
                                                                    ? Text(
                                                                        context.formatString(
                                                                            AppLocale.tanpa_biaya,
                                                                            []),
                                                                        style:
                                                                            TextStyle(
                                                                          fontFamily:
                                                                              'Rubik',
                                                                          fontSize:
                                                                              ScreenUtil().scaleText * 12,
                                                                          color:
                                                                              ColorBase.black80,
                                                                        ),
                                                                        overflow:
                                                                            TextOverflow.ellipsis,
                                                                      )
                                                                    : Text(
                                                                        eventVenueList[x].paymentMethod ==
                                                                                'mixed'
                                                                            ? '${eventDate.format(DateTime.parse(eventVenueList[x].date))}Rp' +
                                                                                Helpers.formatRupiah((eventVenueList[x].onlinePrice + eventVenueList[x].offlinePrice).toString())
                                                                            : eventVenueList[x].paymentMethod == 'online'
                                                                                ? '${eventDate.format(DateTime.parse(eventVenueList[x].date))}Rp' + Helpers.formatRupiah(eventVenueList[x].onlinePrice.toString())
                                                                                : '${eventDate.format(DateTime.parse(eventVenueList[x].date))}Rp' + Helpers.formatRupiah(eventVenueList[x].offlinePrice.toString()),
                                                                        style:
                                                                            TextStyle(
                                                                          fontFamily:
                                                                              'Rubik',
                                                                          fontSize:
                                                                              ScreenUtil().scaleText * 12,
                                                                          height:
                                                                              1.4,
                                                                          color:
                                                                              ColorBase.black80,
                                                                        ),
                                                                      ),
                                                              ),
                                                            ]),
                                                      if (eventVenueList[x]
                                                              .sparringId !=
                                                          0)
                                                        Row(
                                                            mainAxisSize:
                                                                MainAxisSize
                                                                    .min,
                                                            crossAxisAlignment:
                                                                CrossAxisAlignment
                                                                    .start,
                                                            children: [
                                                              SvgPicture.asset(
                                                                  'assets/images/ver3/svg/calendar_mini.svg',
                                                                  width: 16,
                                                                  height: 16),
                                                              SizedBox(
                                                                  width: 4),
                                                              Container(
                                                                  width:
                                                                      screenWidth -
                                                                          90,
                                                                  margin: EdgeInsets
                                                                      .only(
                                                                          top:
                                                                              2),
                                                                  child: Text(
                                                                    '${eventDate.format(DateTime.parse(eventVenueList[x].date))}Rp' +
                                                                        Helpers.formatRupiah(
                                                                            (eventVenueList[x].totalPrice).toString()),
                                                                    style:
                                                                        TextStyle(
                                                                      fontFamily:
                                                                          'Rubik',
                                                                      fontSize:
                                                                          ScreenUtil().scaleText *
                                                                              12,
                                                                      color: ColorBase
                                                                          .black80,
                                                                    ),
                                                                    overflow:
                                                                        TextOverflow
                                                                            .ellipsis,
                                                                  ))
                                                            ]),
                                                      SizedBox(height: 10),
                                                      Row(children: [
                                                        if (eventVenueList[x]
                                                                .use_venue_booking ==
                                                            1)
                                                          Container(
                                                            padding: EdgeInsets
                                                                .symmetric(
                                                                    horizontal:
                                                                        6,
                                                                    vertical:
                                                                        4),
                                                            decoration: BoxDecoration(
                                                                borderRadius:
                                                                    BorderRadius
                                                                        .circular(
                                                                            4),
                                                                color: ColorBase
                                                                    .secondaryGreen),
                                                            child: Row(
                                                                mainAxisSize:
                                                                    MainAxisSize
                                                                        .min,
                                                                children: [
                                                                  Text(
                                                                    'Booked via AYO',
                                                                    style:
                                                                        TextStyle(
                                                                      fontWeight:
                                                                          FontWeight
                                                                              .w500,
                                                                      fontSize:
                                                                          ScreenUtil().scaleText *
                                                                              10,
                                                                      color: ColorBase
                                                                          .primaryWhite,
                                                                      fontFamily:
                                                                          'Rubik',
                                                                    ),
                                                                  ),
                                                                ]),
                                                          ),

                                                        if (eventVenueList[x]
                                                                .isSuperhost ==
                                                            1)
                                                          Container(
                                                            padding: EdgeInsets
                                                                .symmetric(
                                                                    horizontal:
                                                                        6,
                                                                    vertical:
                                                                        4),
                                                            child: Row(
                                                              mainAxisSize:
                                                                  MainAxisSize
                                                                      .min,
                                                              children: [
                                                                Container(
                                                                  height: ScreenUtil()
                                                                          .scaleText *
                                                                      20,
                                                                  child: Image
                                                                      .asset(
                                                                    'assets/images/ver3/super_host_tag_half.png',
                                                                    fit: BoxFit
                                                                        .fitHeight,
                                                                  ),
                                                                ),
                                                              ],
                                                            ),
                                                          ),

                                                        if (eventVenueList[x]
                                                                .is_official_by_venue ==
                                                            1)
                                                          Container(
                                                            padding: EdgeInsets
                                                                .symmetric(
                                                                    horizontal:
                                                                        6,
                                                                    vertical:
                                                                        4),
                                                            decoration: BoxDecoration(
                                                                borderRadius:
                                                                    BorderRadius
                                                                        .circular(
                                                                            4),
                                                                color: const Color(
                                                                    0xFF7A5AF8)),
                                                            child: Row(
                                                                mainAxisSize:
                                                                    MainAxisSize
                                                                        .min,
                                                                children: [
                                                                  Text(
                                                                    'Official by Venue',
                                                                    style:
                                                                        TextStyle(
                                                                      fontWeight:
                                                                          FontWeight
                                                                              .w500,
                                                                      fontSize:
                                                                          ScreenUtil().scaleText *
                                                                              10,
                                                                      color: ColorBase
                                                                          .primaryWhite,
                                                                      fontFamily:
                                                                          'Rubik',
                                                                    ),
                                                                  ),
                                                                ]),
                                                          ),

                                                        // full slot
                                                        if ((eventVenueList[x]
                                                                    .noOfParticipants ==
                                                                eventVenueList[
                                                                        x]
                                                                    .maximumPlayer) &&
                                                            eventVenueList[x]
                                                                    .sparringId ==
                                                                0)
                                                          Container(
                                                            height: ScreenUtil()
                                                                    .scaleText *
                                                                20,
                                                            margin:
                                                                EdgeInsets.only(
                                                                    left: 4),
                                                            decoration: BoxDecoration(
                                                                color: Color(
                                                                    0xFFFEE9DA),
                                                                borderRadius:
                                                                    BorderRadius.circular(
                                                                        ScreenUtil().scaleText *
                                                                            4)),
                                                            padding: EdgeInsets
                                                                .symmetric(
                                                                    vertical: 4,
                                                                    horizontal:
                                                                        8),
                                                            child: Text(
                                                              context
                                                                  .formatString(
                                                                      AppLocale
                                                                          .penuh,
                                                                      []),
                                                              style: TextStyle(
                                                                  fontFamily:
                                                                      'Rubik',
                                                                  fontSize:
                                                                      ScreenUtil()
                                                                              .scaleText *
                                                                          10,
                                                                  color: Color(
                                                                      0xFFF97316),
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .w500),
                                                            ),
                                                          ),

                                                        if (eventVenueList[x].use_venue_booking == 1 ||
                                                            eventVenueList[x]
                                                                    .is_official_by_venue ==
                                                                1 ||
                                                            eventVenueList[x]
                                                                    .isSuperhost ==
                                                                1)
                                                          SizedBox(width: 6),

                                                        if (eventVenueList[x]
                                                                .dpCost >
                                                            0)
                                                          Container(
                                                            padding: EdgeInsets
                                                                .symmetric(
                                                                    horizontal:
                                                                        6,
                                                                    vertical:
                                                                        4),
                                                            decoration: BoxDecoration(
                                                                borderRadius:
                                                                    BorderRadius
                                                                        .circular(
                                                                            4),
                                                                color: Color(
                                                                    int.parse(
                                                                        '0xffF1F1F1'))),
                                                            child: Row(
                                                                mainAxisSize:
                                                                    MainAxisSize
                                                                        .min,
                                                                children: [
                                                                  Text(
                                                                    context
                                                                        .formatString(
                                                                      AppLocale
                                                                          .wajibDp,
                                                                      [],
                                                                    ),
                                                                    style:
                                                                        TextStyle(
                                                                      fontWeight:
                                                                          FontWeight
                                                                              .w500,
                                                                      fontSize:
                                                                          ScreenUtil().scaleText *
                                                                              10,
                                                                      color: ColorBase
                                                                          .black80,
                                                                      fontFamily:
                                                                          'Rubik',
                                                                    ),
                                                                  ),
                                                                ]),
                                                          ),
                                                      ]),
                                                      SizedBox(height: 12),
                                                      if (eventVenueList[x]
                                                              .sparringId ==
                                                          0)
                                                        _eventParticipantAvatarItem(
                                                            context,
                                                            eventVenueList[x],
                                                            x),
                                                      if (eventVenueList[x]
                                                              .sparringId ==
                                                          0)
                                                        SizedBox(height: 12),
                                                      if (eventVenueList[x]
                                                              .communityId !=
                                                          0)
                                                        Padding(
                                                          padding:
                                                              const EdgeInsets
                                                                      .symmetric(
                                                                  vertical:
                                                                      16.0),
                                                          child: DottedLine(
                                                            dashColor: ColorBase
                                                                .black10,
                                                          ),
                                                        ),
                                                      if (eventVenueList[x]
                                                              .communityId !=
                                                          0)
                                                        GestureDetector(
                                                          onTap: () {
                                                            if (eventVenueList[
                                                                        x]
                                                                    .is_official_by_venue ==
                                                                0) {
                                                              Navigator.of(
                                                                      context)
                                                                  .pushNamed(
                                                                      ProfileScreen
                                                                          .routeName,
                                                                      arguments: {
                                                                    'userId':
                                                                        eventVenueList[x]
                                                                            .authorId
                                                                  });
                                                            }
                                                          },
                                                          child: Row(
                                                            children: [
                                                              Container(
                                                                height: 24,
                                                                width: 24,
                                                                margin:
                                                                    EdgeInsets
                                                                        .all(2),
                                                                child: ClipOval(
                                                                    child: CachedNetworkImage(
                                                                        width:
                                                                            24.0,
                                                                        height:
                                                                            24.0,
                                                                        imageUrl: BaseUrlConfig.baseAssetUrl + eventVenueList[x].communityName !=
                                                                                ''
                                                                            ? eventVenueList[x]
                                                                                .communityLogo
                                                                            : eventVenueList[x]
                                                                                .authorAvatar,
                                                                        placeholder:
                                                                            (context, url) =>
                                                                                CircularProgressIndicator(),
                                                                        errorWidget: (context, url, error) => DefaultProfile(
                                                                            fontSize: ScreenUtil().scaleText *
                                                                                12,
                                                                            name:
                                                                                eventVenueList[x].communityName,
                                                                            subSize: 5,
                                                                            size: 24))),
                                                              ),
                                                              SizedBox(
                                                                  width: 6),
                                                              Text(
                                                                context.formatString(
                                                                    AppLocale
                                                                        .dibuat_oleh,
                                                                    []),
                                                                style:
                                                                    TextStyle(
                                                                  fontFamily:
                                                                      'Rubik',
                                                                  fontSize:
                                                                      ScreenUtil()
                                                                              .scaleText *
                                                                          12,
                                                                  color: ColorBase
                                                                      .black80,
                                                                  height: 1.4,
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .w400,
                                                                ),
                                                              ),
                                                              Row(
                                                                children: [
                                                                  Text(
                                                                    eventVenueList[x].communityName !=
                                                                            ''
                                                                        ? eventVenueList[x].communityName.length >
                                                                                10
                                                                            ? eventVenueList[x].communityName.substring(0, 10) +
                                                                                '...'
                                                                            : eventVenueList[x]
                                                                                .communityName
                                                                        : eventVenueList[x].authorFirstName.length >
                                                                                10
                                                                            ? eventVenueList[x].authorFirstName.substring(0, 10) +
                                                                                '...'
                                                                            : eventVenueList[x].authorFirstName,
                                                                    style:
                                                                        TextStyle(
                                                                      fontFamily:
                                                                          'Rubik',
                                                                      fontSize:
                                                                          ScreenUtil().scaleText *
                                                                              12,
                                                                      color: ColorBase
                                                                          .black100,
                                                                      height:
                                                                          1.4,
                                                                      fontWeight:
                                                                          FontWeight
                                                                              .w500,
                                                                    ),
                                                                  ),
                                                                ],
                                                              ),
                                                            ],
                                                          ),
                                                        ),
                                                    ],
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                  if (eventVenueList[x].isCoaching == 1)
                                    Positioned(
                                        child: Container(
                                      height: ScreenUtil().scaleText * 26,
                                      child: SvgPicture.asset(
                                          'assets/images/ver3/svg/coaching-tag.svg'),
                                    ))
                                ]),
                            ]),
                          )),
                  if (!isLoading)
                    if (eventVenueList.length == 0)
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        width: screenWidth,
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              SizedBox(
                                  height: MediaQuery.of(context).size.height *
                                      0.05),
                              Image(
                                image: AssetImage(
                                    'assets/images/ver3/empty_search.png'),
                                height: ScreenUtil().scaleText * 72,
                                fit: BoxFit.fitHeight,
                              ),
                              SizedBox(
                                height: 16,
                              ),
                              Text(
                                (filterDateActivity != '' ||
                                        categoryName.length > 0 ||
                                        filterCoaching ||
                                        filterBookedViaAyo ||
                                        filterSuperhost ||
                                        filterOfficialByVenue ||
                                        selectedLevelList.length > 0 ||
                                        timeFilterSelected.length > 0)
                                    ? context.formatString(
                                        AppLocale.hasil_tidak_ditemukan, [])
                                    : context.formatString(
                                        AppLocale.belum_ada_aktivitas, []),
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  fontSize: ScreenUtil().scaleText * 16,
                                  fontFamily: 'Rubik',
                                  color: ColorBase.black100,
                                ),
                              ),
                              SizedBox(
                                height: 4,
                              ),
                              Text(
                                (filterDateActivity != '' ||
                                        categoryName.length > 0 ||
                                        filterCoaching ||
                                        filterBookedViaAyo ||
                                        filterSuperhost ||
                                        filterOfficialByVenue ||
                                        filterOfficialByVenue ||
                                        selectedLevelList.length > 0 ||
                                        timeFilterSelected.length > 0)
                                    ? context.formatString(
                                        AppLocale.tenangKamuBisaResetFilter, [])
                                    : context.formatString(
                                        AppLocale.aktivitasYangDilaksanakan,
                                        []),
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontWeight: FontWeight.w400,
                                  fontSize: ScreenUtil().scaleText * 14,
                                  fontFamily: 'Rubik',
                                  color: ColorBase.black80,
                                ),
                              ),
                              SizedBox(
                                height: 16,
                              ),
                              if (filterDateActivity != '' ||
                                  categoryName.length > 0 ||
                                  filterCoaching ||
                                  filterBookedViaAyo ||
                                  filterSuperhost ||
                                  filterOfficialByVenue ||
                                  selectedLevelList.length > 0 ||
                                  timeFilterSelected.length > 0)
                                GestureDetector(
                                  onTap: () {
                                    setState(() {
                                      filterDateActivity = '';
                                      categoryName = [];
                                      filterCoaching = false;
                                      filterBookedViaAyo = false;
                                      filterSuperhost = false;
                                      filterOfficialByVenue = false;
                                      selectedLevelList = [];
                                      timeFilterSelected = [];

                                      selectedTimeStart = '00:00';
                                      selectedTimeEnd = '23:00';
                                      integerSelectedTimeList =
                                          SfRangeValues(0, 23);
                                      finalTimeList = SfRangeValues(0, 23);
                                      filterStartTime = 0;
                                      filterEndTime = 23;

                                      selectedLevel = 'Semua Level';
                                      integerSelectedLevelList =
                                          SfRangeValues(0, 4);
                                      finalLevelList = SfRangeValues(0, 4);
                                      startLevel = 0;
                                      endLevel = 4;

                                      _loadActivity();
                                    });
                                  },
                                  child: Container(
                                      width: 144,
                                      padding: EdgeInsets.symmetric(
                                          horizontal: 8, vertical: 8),
                                      decoration: BoxDecoration(
                                        color: ColorBase.primaryRed,
                                        borderRadius: BorderRadius.circular(8),
                                      ),
                                      child: Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Text(
                                            context.formatString(
                                                AppLocale.resetFilter, []),
                                            style: TextStyle(
                                                color: ColorBase.primaryWhite,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                                fontWeight: FontWeight.w500,
                                                height: 1.4),
                                          ),
                                        ],
                                      )),
                                ),
                              SizedBox(height: screenHeight * 0.3),
                            ]),
                      ),
                ],
              )
      ]),
    );
  }

  bool isToday(DateTime date) {
    final now = DateTime.now();
    return date.year == now.year &&
        date.month == now.month &&
        date.day == now.day;
  }

  Widget _buildCoachVenueContent(
      {bool isLoading = false, List<VenueCoach> coachVenueList}) {
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;
    double screenWidth = MediaQuery.of(context).size.width;

    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
              color: ColorBase.primaryWhite,
              width: 0,
              style: BorderStyle.none)),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        isLoading
            ? Container(
                width: screenWidth - 32,
                padding: EdgeInsets.symmetric(vertical: 12),
                margin: EdgeInsets.only(bottom: 16),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Skeleton(width: 100, height: 40),
                      SizedBox(height: 8),
                      Skeleton(width: screenWidth - 32, height: 100),
                      SizedBox(height: 8),
                      Skeleton(width: screenWidth - 32, height: 100),
                      SizedBox(height: 8),
                      Skeleton(width: screenWidth - 32, height: 100),
                    ]),
              )
            : Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  GestureDetector(
                      onTap: () async {
                        setState(() {
                          SportSelectorVenueDetailModal(
                              categoryName: sportCategoryName,
                              categoryId: sports,
                              theContext: context,
                              allSPort: allSport,
                              myPref: myPref,
                              updateSport: updateSport,
                              venueName: venueName,
                              venueId: widget.venueId);
                        });
                      },
                      child: IntrinsicWidth(
                        child: Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 8, vertical: 4),
                            decoration: BoxDecoration(
                                color: ColorBase.primaryWhite,
                                borderRadius: BorderRadius.circular(8),
                                border: Border.all(
                                    color: ColorBase.black10,
                                    style: BorderStyle.solid,
                                    width: 1)),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  newSportFilter > 0
                                      ? context
                                          .formatString(AppLocale.olahraga, [])
                                      : context.formatString(
                                          AppLocale.semua_olahraga, []),
                                  style: TextStyle(
                                      color: ColorBase.black80,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 14,
                                      fontWeight: FontWeight.w400,
                                      height: 1.4),
                                ),
                                if (newSportFilter > 0) SizedBox(width: 4),
                                if (newSportFilter > 0)
                                  ConstrainedBox(
                                    constraints: BoxConstraints(
                                      minHeight: 12,
                                      minWidth: 12,
                                      maxWidth: 30,
                                    ),
                                    child: Container(
                                      margin: EdgeInsets.only(top: 2),
                                      padding: EdgeInsets.symmetric(
                                          vertical: 2, horizontal: 4),
                                      decoration: BoxDecoration(
                                          color: ColorBase.black100,
                                          shape: BoxShape.rectangle,
                                          borderRadius:
                                              BorderRadius.circular(4)),
                                      child: Text(
                                        newSportFilter.toString(),
                                        style: TextStyle(
                                          color: Colors.white,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 9,
                                          fontWeight: FontWeight.w500,
                                        ),
                                        textAlign: TextAlign.center,
                                      ),
                                    ),
                                  ),
                                SizedBox(width: 4),
                                Container(
                                  margin: EdgeInsets.only(top: 2),
                                  height: 16,
                                  width: 16,
                                  child: Image.asset(
                                    'assets/images/ver3/chevron-down.png',
                                    fit: BoxFit.contain,
                                  ),
                                ),
                              ],
                            )),
                      )),
                  SizedBox(height: 12),
                  if (!isLoading)
                    if (coachVenueList.length > 0)
                      Container(
                          constraints:
                              BoxConstraints(minHeight: screenHeight * 0.5),
                          child: SingleChildScrollView(
                            child: Column(children: [
                              for (int x = 0; x < coachVenueList.length; x++)
                                Container(
                                  width: screenWidth - 32,
                                  margin: EdgeInsets.only(bottom: 12),
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 16, vertical: 12),
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(8),
                                    border: Border.all(
                                        color: ColorBase.black10, width: 1),
                                  ),
                                  child: Column(
                                    children: [
                                      Row(
                                        children: [
                                          Container(
                                            height: 48,
                                            width: 48,
                                            decoration: BoxDecoration(
                                              color: Color(
                                                  int.parse('0xff01646B')),
                                              shape: BoxShape.circle,
                                            ),
                                            child: Center(
                                                child: ClipOval(
                                                    child: Image(
                                              image: NetworkImage(
                                                BaseUrlConfig.baseAssetUrl +
                                                    coachVenueList[x].image,
                                              ),
                                              height: 48,
                                              width: 48,
                                              errorBuilder:
                                                  (BuildContext context,
                                                      Object exception,
                                                      StackTrace stackTrace) {
                                                return Image.asset(
                                                  'assets/images/ver3/default_user.png',
                                                  height: 48,
                                                  width: 48,
                                                );
                                              },
                                            ))),
                                          ),
                                          SizedBox(width: 12),
                                          Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.start,
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                Text(
                                                  coachVenueList[x].name,
                                                  style: TextStyle(
                                                    color: ColorBase.black100,
                                                    fontFamily: 'Rubik',
                                                    fontWeight: FontWeight.w500,
                                                    fontSize:
                                                        ScreenUtil().scaleText *
                                                            15,
                                                  ),
                                                ),
                                                SizedBox(height: 4),
                                                Container(
                                                    child: Row(
                                                  children: [
                                                    for (int i = 0;
                                                        i <
                                                            coachVenueList[x]
                                                                .sports
                                                                .length;
                                                        i++)
                                                      Row(
                                                        children: [
                                                          if (i <= 2)
                                                            Container(
                                                                width: 16,
                                                                height: 16,
                                                                child: SvgPicture.network(
                                                                    BaseUrlConfig
                                                                            .baseAssetUrl +
                                                                        coachVenueList[x]
                                                                            .sports[
                                                                                i]
                                                                            .svgPath,
                                                                    color: ColorBase
                                                                        .black80)),
                                                          if (i <= 2)
                                                            SizedBox(width: 4),
                                                          if (i <= 2)
                                                            Text(
                                                                i == 2
                                                                    ? coachVenueList[x]
                                                                            .sports[
                                                                                i]
                                                                            .name
                                                                            .substring(0,
                                                                                2) +
                                                                        '..'
                                                                    : coachVenueList[
                                                                            x]
                                                                        .sports[
                                                                            i]
                                                                        .name,
                                                                style:
                                                                    TextStyle(
                                                                  color: ColorBase
                                                                      .black80,
                                                                  fontFamily:
                                                                      'Rubik',
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .w400,
                                                                  fontSize:
                                                                      ScreenUtil()
                                                                              .scaleText *
                                                                          12,
                                                                )),
                                                          if (i <= 2)
                                                            SizedBox(width: 4),
                                                          if (i < 2 &&
                                                              coachVenueList[x]
                                                                      .sports
                                                                      .length >
                                                                  1)
                                                            Text(
                                                              ' · ',
                                                              style: TextStyle(
                                                                  color: ColorBase
                                                                      .black80,
                                                                  fontFamily:
                                                                      'Rubik',
                                                                  fontSize:
                                                                      ScreenUtil()
                                                                              .scaleText *
                                                                          12),
                                                            ),
                                                          if (i < 2 &&
                                                              coachVenueList[x]
                                                                      .sports
                                                                      .length >
                                                                  1)
                                                            SizedBox(width: 4),
                                                        ],
                                                      ),
                                                  ],
                                                )),
                                              ]),
                                        ],
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(
                                            top: 12, bottom: 16),
                                        child: Text(
                                          coachVenueList[x].description,
                                          style: TextStyle(
                                            color: ColorBase.black80,
                                            fontFamily: 'Rubik',
                                            fontWeight: FontWeight.w400,
                                            fontSize:
                                                ScreenUtil().scaleText * 12,
                                          ),
                                          maxLines: 2,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                Text(
                                                    context.formatString(
                                                      AppLocale.mulaiDari,
                                                      [],
                                                    ),
                                                    style: TextStyle(
                                                        fontSize: ScreenUtil()
                                                                .scaleText *
                                                            12,
                                                        fontFamily: 'Rubik',
                                                        fontWeight:
                                                            FontWeight.w400,
                                                        color:
                                                            ColorBase.black80)),
                                                SizedBox(height: 4),
                                                Container(
                                                  constraints: BoxConstraints(
                                                    maxWidth: screenWidth * 0.5,
                                                  ),
                                                  child: RichText(
                                                    maxLines: 1,
                                                    overflow:
                                                        TextOverflow.ellipsis,
                                                    text: TextSpan(
                                                      style: TextStyle(
                                                        fontSize: 14,
                                                        color: ColorBase
                                                            .secondaryRed,
                                                        fontWeight:
                                                            FontWeight.w500,
                                                      ),
                                                      children: [
                                                        TextSpan(
                                                          text: 'Rp' +
                                                              Helpers.formatRupiah(
                                                                  coachVenueList[
                                                                          x]
                                                                      .price
                                                                      .toString()),
                                                          style: TextStyle(
                                                              color: ColorBase
                                                                  .black100,
                                                              fontFamily:
                                                                  'Rubik',
                                                              fontSize: ScreenUtil()
                                                                      .scaleText *
                                                                  14,
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w500,
                                                              height: 1.4),
                                                        ),
                                                        TextSpan(
                                                          text:
                                                              '/${context.formatString(AppLocale.peserta, []).toLowerCase()}/${context.formatString(AppLocale.sesi, [])}',
                                                          style: TextStyle(
                                                              color: ColorBase
                                                                  .black60,
                                                              fontFamily:
                                                                  'Rubik',
                                                              fontSize: ScreenUtil()
                                                                      .scaleText *
                                                                  12,
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w400,
                                                              height: 1.4),
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                ),
                                              ]),
                                          Container(
                                            child: GestureDetector(
                                              onTap: () async {
                                                if (coachVenueList[x]
                                                        .sports
                                                        .length ==
                                                    1) {
                                                  int result =
                                                      await _checkPickedSportCoach(
                                                          coachVenueList[x]
                                                              .sports[0]);

                                                  if (result == 0) {
                                                    chooseFieldCoach(
                                                        coachVenueList[x]
                                                            .sports[0],
                                                        coachVenueList[x]
                                                            .fieldAdditionalServiceId);
                                                  } else {}
                                                } else {
                                                  _coachSportSelectorModal(
                                                      context,
                                                      screenWidth,
                                                      screenHeight,
                                                      coachVenueList[x].sports,
                                                      coachVenueList[x]
                                                          .fieldAdditionalServiceId);
                                                }
                                              },
                                              child: Container(
                                                padding: EdgeInsets.symmetric(
                                                    horizontal: 16),
                                                height: 32,
                                                decoration: BoxDecoration(
                                                  color: ColorBase.primaryRed,
                                                  borderRadius:
                                                      BorderRadius.circular(8),
                                                ),
                                                child: Center(
                                                  child: Text(
                                                      context.formatString(
                                                        AppLocale.pilih_jadwal,
                                                        [],
                                                      ),
                                                      style: TextStyle(
                                                          fontSize: ScreenUtil()
                                                                  .scaleText *
                                                              12,
                                                          fontFamily: 'Rubik',
                                                          fontWeight:
                                                              FontWeight.w500,
                                                          color: ColorBase
                                                              .primaryWhite)),
                                                ),
                                              ),
                                            ),
                                          ),
                                        ],
                                      )
                                    ],
                                  ),
                                ),
                            ]),
                          )),
                  if (!isLoading)
                    if (coachVenueList.length == 0)
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        width: screenWidth,
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              SizedBox(
                                  height: MediaQuery.of(context).size.height *
                                      0.05),
                              Image(
                                image: AssetImage(
                                    'assets/images/ver3/empty_search.png'),
                                height: ScreenUtil().scaleText * 72,
                                fit: BoxFit.fitHeight,
                              ),
                              SizedBox(
                                height: 16,
                              ),
                              Text(
                                newSportFilter > 0
                                    ? context.formatString(
                                        AppLocale.hasil_tidak_ditemukan, [])
                                    : context.formatString(
                                        AppLocale.belumAdaCoachTersedia, []),
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  fontSize: ScreenUtil().scaleText * 16,
                                  fontFamily: 'Rubik',
                                  color: ColorBase.black100,
                                ),
                              ),
                              SizedBox(
                                height: 4,
                              ),
                              Text(
                                newSportFilter > 0
                                    ? context.formatString(
                                        AppLocale.tenangKamuBisaResetFilter, [])
                                    : context.formatString(
                                        AppLocale.belumAdaCoachTersediaDesc,
                                        []),
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontWeight: FontWeight.w400,
                                  fontSize: ScreenUtil().scaleText * 14,
                                  fontFamily: 'Rubik',
                                  color: ColorBase.black80,
                                ),
                              ),
                              SizedBox(
                                height: 16,
                              ),
                              if (membershipType != '')
                                GestureDetector(
                                  onTap: () {
                                    setState(() {
                                      newSportFilter = 0;
                                    });
                                  },
                                  child: Container(
                                      width: 144,
                                      padding: EdgeInsets.symmetric(
                                          horizontal: 8, vertical: 8),
                                      decoration: BoxDecoration(
                                        color: ColorBase.primaryRed,
                                        borderRadius: BorderRadius.circular(8),
                                      ),
                                      child: Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Text(
                                            context.formatString(
                                                AppLocale.resetFilter, []),
                                            style: TextStyle(
                                                color: ColorBase.primaryWhite,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                                fontWeight: FontWeight.w500,
                                                height: 1.4),
                                          ),
                                        ],
                                      )),
                                ),
                              SizedBox(height: screenHeight * 0.3),
                            ]),
                      ),
                ],
              )
      ]),
    );
  }

  Widget _buildHorizontalMembershipVenueContent(
      {bool isLoading = false, List<VenueMembership> membershipVenueList}) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;

    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
              color: ColorBase.primaryWhite,
              width: 0,
              style: BorderStyle.none)),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Column(
          children: [
            Container(
                child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(children: [
                for (int x = 0; x < membershipVenueList.length; x++)
                  Container(
                    width: screenWidth * 0.7,
                    margin: EdgeInsets.only(right: 12),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(
                            color: ColorBase.black10,
                            style: BorderStyle.solid,
                            width: 1)),
                    padding: EdgeInsets.only(
                        top: 12, left: 14, right: 14, bottom: 14),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          membershipVenueList[x].name,
                          style: TextStyle(
                              color: ColorBase.black100,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 14,
                              fontWeight: FontWeight.w500,
                              height: 1.4),
                        ),
                        Text(
                          membershipVenueList[x].type == 'langganan'
                              ? '· ' +
                                  context.formatString(AppLocale.langganan, [
                                    membershipVenueList[x].minSlot.toString()
                                  ]) +
                                  ' ' +
                                  context.formatString(
                                      AppLocale.slot_per_minggu, [])
                              : '· ' +
                                  context.formatString(
                                      AppLocale.paket_pembelian, [
                                    membershipVenueList[x].minSlot.toString()
                                  ]) +
                                  ' ' +
                                  context.formatString(
                                      AppLocale.jadwal_sekaligus, []),
                          style: TextStyle(
                              color: ColorBase.black100,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 12,
                              fontWeight: FontWeight.w400,
                              height: 1.4),
                        ),
                        Text(
                          membershipVenueList[x].type == 'langganan'
                              ? '· ' +
                                  context.formatString(
                                      AppLocale.perpanjang_setiap, []) +
                                  ' ' +
                                  (membershipVenueList[x].slotCycle / 30)
                                      .round()
                                      .toString() +
                                  ' ' +
                                  context.formatString(AppLocale.bulan, [])
                              : ' ',
                          style: TextStyle(
                              color: ColorBase.black100,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 12,
                              fontWeight: FontWeight.w400,
                              height: 1.4),
                        ),
                        Container(
                          width: screenWidth - 32,
                          child: Padding(
                            padding: EdgeInsets.symmetric(vertical: 12),
                            child: DottedLine(dashColor: ColorBase.black10),
                          ),
                        ),
                        SizedBox(height: 2),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                if (membershipVenueList[x].discountAmount > 0)
                                  Container(
                                    margin: EdgeInsets.only(top: 4, right: 0),
                                    height: 12,
                                    width: 12,
                                    child: Image.asset(
                                      'assets/images/ver3/fire-discount.png',
                                      fit: BoxFit.contain,
                                    ),
                                  ),
                                if (membershipVenueList[x].discountAmount > 0)
                                  SizedBox(width: 4),
                                if (membershipVenueList[x].discountAmount > 0)
                                  Container(
                                    margin: EdgeInsets.only(top: 2),
                                    child: RichText(
                                      text: TextSpan(
                                        style: TextStyle(
                                          fontSize: 11,
                                          color: ColorBase.secondaryRed,
                                          fontWeight: FontWeight.w500,
                                        ),
                                        children: [
                                          TextSpan(
                                            text: membershipVenueList[x]
                                                        .discountType ==
                                                    'percentage'
                                                ? 'Disc.' +
                                                    ' ' +
                                                    membershipVenueList[x]
                                                        .discountAmount
                                                        .toString() +
                                                    '%'
                                                : 'Disc.' +
                                                    ' Rp' +
                                                    Helpers.formatRupiah(
                                                            membershipVenueList[
                                                                    x]
                                                                .discountAmount
                                                                .toString())
                                                        .toString(),
                                            style: TextStyle(
                                                color: ColorBase.secondaryRed,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 11,
                                                fontWeight: FontWeight.w500,
                                                height: 1.4),
                                          ),
                                          TextSpan(
                                            text:
                                                '/${context.formatString(AppLocale.sesi, [])}',
                                            style: TextStyle(
                                                color: ColorBase.secondaryRed,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 12,
                                                fontWeight: FontWeight.w400,
                                                height: 1.4),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                              ],
                            ),
                            GestureDetector(
                              onTap: () {
                                LoadingDialogWidget.show(context);

                                venueMembershipTncRepository
                                    .membershipTnc(
                                  context,
                                  venueId: widget.venueId,
                                  membershipId: membershipVenueList[x].id,
                                )
                                    .then((val) {
                                  LoadingDialogWidget.hide(context);
                                  setState(() {
                                    _membershipTnCModal(
                                        context,
                                        screenWidth,
                                        screenHeight,
                                        membershipVenueList[x],
                                        membershipVenueList[x].id,
                                        membershipVenueList[x]
                                            .activeFields[0]
                                            .fieldId,
                                        membershipVenueList[x].type,
                                        membershipVenueList[x].name,
                                        val.data.tncs,
                                        val.data.packageName,
                                        membershipVenueList[x].slotRule);
                                  });
                                });
                              },
                              child: Container(
                                padding: EdgeInsets.symmetric(
                                    horizontal: 8, vertical: 4),
                                decoration: BoxDecoration(
                                    color: Color(0xFFF5E6E9),
                                    borderRadius: BorderRadius.circular(8),
                                    border: Border.all(
                                        color: Color(0xFFF5E6E9),
                                        style: BorderStyle.solid,
                                        width: 1)),
                                child: Text(
                                  context.formatString(AppLocale.beli, []),
                                  style: TextStyle(
                                      color: ColorBase.primaryRed,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 12,
                                      fontWeight: FontWeight.w500,
                                      height: 1.4),
                                ),
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
              ]),
            )),
            GestureDetector(
              onTap: () {
                for (var i = 0; i < tab.length; i++) {
                  tab[i]['is_active'] = false;
                }
                tab[3]['is_active'] = true;
                activeTab = 'membership';

                _scrollBottomBarController.animateTo(
                  0.0,
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.ease,
                );
              },
              child: Container(
                height: 40,
                margin: EdgeInsets.only(top: 20),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: ColorBase.black10, width: 1),
                ),
                child: Center(
                  child: Text(
                    context.formatString(AppLocale.lihatSemuaPaket,
                        [membershipVenueList.length]),
                    style: TextStyle(
                      color: ColorBase.black100,
                      fontFamily: 'Rubik',
                      fontSize: ScreenUtil().scaleText * 14,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ),
            ),
          ],
        )
      ]),
    );
  }

  Widget _buildMembershipVenueContent(
      {bool isLoading = false, List<VenueMembership> membershipVenueList}) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;

    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
              color: ColorBase.primaryWhite,
              width: 0,
              style: BorderStyle.none)),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        isLoading
            ? Container(
                width: screenWidth - 32,
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                margin: EdgeInsets.only(bottom: 16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(color: ColorBase.black10, width: 1),
                ),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Skeleton(width: 50, height: 20),
                          SizedBox(width: 8),
                          Skeleton(width: 50, height: 20),
                        ],
                      ),
                      SizedBox(height: 8),
                      Skeleton(width: screenWidth - 32, height: 100),
                      SizedBox(height: 8),
                      Skeleton(width: screenWidth - 32, height: 100),
                      SizedBox(height: 8),
                      Skeleton(width: screenWidth - 32, height: 100),
                    ]),
              )
            : Column(
                children: [
                  Container(
                    child: Row(
                      children: [
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              if (membershipType == 'langganan') {
                                membershipTypes = ['langganan', 'bundling'];
                                membershipType = '';
                              } else {
                                membershipTypes = ['langganan'];
                                membershipType = 'langganan';
                              }

                              actionFilterMembership();
                            });
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 8, vertical: 4),
                            decoration: BoxDecoration(
                                color: membershipType == 'langganan'
                                    ? ColorBase.black10
                                    : ColorBase.primaryWhite,
                                borderRadius: BorderRadius.circular(8),
                                border: Border.all(
                                    color: ColorBase.black10,
                                    style: BorderStyle.solid,
                                    width: 1)),
                            child: Text(
                              context.formatString(AppLocale.langganan, []),
                              style: TextStyle(
                                  color: ColorBase.black80,
                                  fontFamily: 'Rubik',
                                  fontSize: ScreenUtil().scaleText * 14,
                                  fontWeight: FontWeight.w400,
                                  height: 1.4),
                            ),
                          ),
                        ),
                        SizedBox(width: 8),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              if (membershipType == 'bundling') {
                                membershipTypes = ['langganan', 'bundling'];
                                membershipType = '';
                              } else {
                                membershipTypes = ['bundling'];
                                membershipType = 'bundling';
                              }

                              actionFilterMembership();
                            });
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 8, vertical: 4),
                            decoration: BoxDecoration(
                                color: membershipType == 'bundling'
                                    ? ColorBase.black10
                                    : ColorBase.primaryWhite,
                                borderRadius: BorderRadius.circular(8),
                                border: Border.all(
                                    color: ColorBase.black10,
                                    style: BorderStyle.solid,
                                    width: 1)),
                            child: Text(
                              context.formatString(AppLocale.bundling, []),
                              style: TextStyle(
                                  color: ColorBase.black80,
                                  fontFamily: 'Rubik',
                                  fontSize: ScreenUtil().scaleText * 14,
                                  fontWeight: FontWeight.w400,
                                  height: 1.4),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 12),
                  if (!isLoading)
                    if (membershipVenueList.length > 0)
                      Container(
                          constraints:
                              BoxConstraints(minHeight: screenHeight * 0.5),
                          child: SingleChildScrollView(
                            child: Column(children: [
                              for (int x = 0;
                                  x < membershipVenueList.length;
                                  x++)
                                Stack(
                                  children: [
                                    Positioned(
                                      top: 0,
                                      right: 0,
                                      child: Container(
                                        padding: const EdgeInsets.symmetric(
                                            horizontal: 8, vertical: 4),
                                        decoration: BoxDecoration(
                                          color: const Color(0xFFF2EFFE),
                                          borderRadius: const BorderRadius.only(
                                            topRight: Radius.circular(12),
                                            bottomLeft: Radius.circular(12),
                                          ),
                                        ),
                                        child: Text(
                                          membershipVenueList[x].type ==
                                                  'langganan'
                                              ? context.formatString(
                                                  AppLocale.langganan,
                                                  []).toUpperCase()
                                              : context.formatString(
                                                  AppLocale.bundling,
                                                  []).toUpperCase(),
                                          style: TextStyle(
                                            color: Color(0xFF7A5AF8),
                                            fontWeight: FontWeight.w500,
                                            fontSize:
                                                ScreenUtil().scaleText * 12,
                                            letterSpacing: 0.5,
                                            fontStyle: FontStyle.italic,
                                          ),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.only(bottom: 12),
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          border: Border.all(
                                              color: ColorBase.black10,
                                              style: BorderStyle.solid,
                                              width: 1)),
                                      padding: EdgeInsets.only(
                                          top: 20,
                                          left: 14,
                                          right: 14,
                                          bottom: 14),
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            membershipVenueList[x].name,
                                            style: TextStyle(
                                                color: ColorBase.black100,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                                fontWeight: FontWeight.w500,
                                                height: 1.4),
                                          ),
                                          Text(
                                            membershipVenueList[x].type ==
                                                    'langganan'
                                                ? '· ' +
                                                    context.formatString(
                                                        AppLocale.langganan, [
                                                      membershipVenueList[x]
                                                          .minSlot
                                                          .toString()
                                                    ]) +
                                                    ' ' +
                                                    context.formatString(
                                                        AppLocale
                                                            .slot_per_minggu,
                                                        [])
                                                : '· ' +
                                                    context.formatString(
                                                        AppLocale
                                                            .paket_pembelian,
                                                        [
                                                          membershipVenueList[x]
                                                              .minSlot
                                                              .toString()
                                                        ]) +
                                                    ' ' +
                                                    context.formatString(
                                                        AppLocale
                                                            .jadwal_sekaligus,
                                                        []),
                                            style: TextStyle(
                                                color: ColorBase.black100,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 12,
                                                fontWeight: FontWeight.w400,
                                                height: 1.4),
                                          ),
                                          Text(
                                            membershipVenueList[x].type ==
                                                    'langganan'
                                                ? '· ' +
                                                    context.formatString(
                                                        AppLocale
                                                            .perpanjang_setiap,
                                                        []) +
                                                    ' ' +
                                                    (membershipVenueList[x]
                                                                .slotCycle /
                                                            30)
                                                        .round()
                                                        .toString() +
                                                    ' ' +
                                                    context.formatString(
                                                        AppLocale.bulan, [])
                                                : ' ',
                                            style: TextStyle(
                                                color: ColorBase.black100,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 12,
                                                fontWeight: FontWeight.w400,
                                                height: 1.4),
                                          ),
                                          Container(
                                            width: screenWidth - 32,
                                            child: Padding(
                                              padding: EdgeInsets.symmetric(
                                                  vertical: 12),
                                              child: DottedLine(
                                                  dashColor: ColorBase.black10),
                                            ),
                                          ),
                                          SizedBox(height: 6),
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Row(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  if (membershipVenueList[x]
                                                          .discountAmount >
                                                      0)
                                                    Container(
                                                      margin: EdgeInsets.only(
                                                          top: 4, right: 0),
                                                      height: 12,
                                                      width: 12,
                                                      child: Image.asset(
                                                        'assets/images/ver3/fire-discount.png',
                                                        fit: BoxFit.contain,
                                                      ),
                                                    ),
                                                  if (membershipVenueList[x]
                                                          .discountAmount >
                                                      0)
                                                    SizedBox(width: 2),
                                                  if (membershipVenueList[x]
                                                          .discountAmount >
                                                      0)
                                                    RichText(
                                                      text: TextSpan(
                                                        style: TextStyle(
                                                          fontSize: 12,
                                                          color: ColorBase
                                                              .secondaryRed,
                                                          fontWeight:
                                                              FontWeight.w500,
                                                        ),
                                                        children: [
                                                          TextSpan(
                                                            text: membershipVenueList[
                                                                            x]
                                                                        .discountType ==
                                                                    'percentage'
                                                                ? 'Disc.' +
                                                                    ' ' +
                                                                    membershipVenueList[
                                                                            x]
                                                                        .discountAmount
                                                                        .toString() +
                                                                    '%'
                                                                : context.formatString(
                                                                        AppLocale
                                                                            .diskon,
                                                                        []) +
                                                                    ' Rp' +
                                                                    Helpers.formatRupiah(membershipVenueList[x]
                                                                            .discountAmount
                                                                            .toString())
                                                                        .toString(),
                                                            style: TextStyle(
                                                                color: ColorBase
                                                                    .secondaryRed,
                                                                fontFamily:
                                                                    'Rubik',
                                                                fontSize:
                                                                    ScreenUtil()
                                                                            .scaleText *
                                                                        12,
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w500,
                                                                height: 1.4),
                                                          ),
                                                          TextSpan(
                                                            text:
                                                                '/${context.formatString(AppLocale.sesi, [])}',
                                                            style: TextStyle(
                                                                color: ColorBase
                                                                    .secondaryRed,
                                                                fontFamily:
                                                                    'Rubik',
                                                                fontSize:
                                                                    ScreenUtil()
                                                                            .scaleText *
                                                                        12,
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w400,
                                                                height: 1.4),
                                                          ),
                                                        ],
                                                      ),
                                                    ),
                                                ],
                                              ),
                                              GestureDetector(
                                                onTap: () {
                                                  LoadingDialogWidget.show(
                                                      context);

                                                  venueMembershipTncRepository
                                                      .membershipTnc(
                                                    context,
                                                    venueId: widget.venueId,
                                                    membershipId:
                                                        membershipVenueList[x]
                                                            .id,
                                                  )
                                                      .then((val) {
                                                    LoadingDialogWidget.hide(
                                                        context);
                                                    setState(() {
                                                      _membershipTnCModal(
                                                          context,
                                                          screenWidth,
                                                          screenHeight,
                                                          membershipVenueList[
                                                              x],
                                                          membershipVenueList[x]
                                                              .id,
                                                          membershipVenueList[x]
                                                              .activeFields[0]
                                                              .fieldId,
                                                          membershipVenueList[x]
                                                              .type,
                                                          membershipVenueList[x]
                                                              .name,
                                                          val.data.tncs,
                                                          val.data.packageName,
                                                          membershipVenueList[x]
                                                              .slotRule);
                                                    });
                                                  });
                                                },
                                                child: Container(
                                                  padding: EdgeInsets.symmetric(
                                                      horizontal: 8,
                                                      vertical: 4),
                                                  decoration: BoxDecoration(
                                                      color:
                                                          ColorBase.primaryRed,
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              8),
                                                      border: Border.all(
                                                          color: ColorBase
                                                              .primaryRed,
                                                          style:
                                                              BorderStyle.solid,
                                                          width: 1)),
                                                  child: Text(
                                                    context.formatString(
                                                        AppLocale
                                                            .beliPaketVenueDetail,
                                                        []),
                                                    style: TextStyle(
                                                        color: ColorBase
                                                            .primaryWhite,
                                                        fontFamily: 'Rubik',
                                                        fontSize: ScreenUtil()
                                                                .scaleText *
                                                            12,
                                                        fontWeight:
                                                            FontWeight.w500,
                                                        height: 1.4),
                                                  ),
                                                ),
                                              ),
                                            ],
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                            ]),
                          )),
                  if (!isLoading)
                    if (membershipVenueList.length == 0)
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        width: screenWidth,
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              SizedBox(
                                  height: MediaQuery.of(context).size.height *
                                      0.05),
                              Image(
                                image: AssetImage(
                                    'assets/images/ver3/empty_search.png'),
                                height: ScreenUtil().scaleText * 72,
                                fit: BoxFit.fitHeight,
                              ),
                              SizedBox(
                                height: 16,
                              ),
                              Text(
                                membershipType == 'langganan'
                                    ? context.formatString(
                                        AppLocale.belumAdaPaketLangganan, [])
                                    : membershipType == 'bundling'
                                        ? context.formatString(
                                            AppLocale.belumAdaPaketBundling, [])
                                        : context.formatString(
                                            AppLocale.belumAdaMembership, []),
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  fontSize: ScreenUtil().scaleText * 16,
                                  fontFamily: 'Rubik',
                                  color: ColorBase.black100,
                                ),
                              ),
                              SizedBox(
                                height: 4,
                              ),
                              Text(
                                membershipType == 'langganan'
                                    ? context.formatString(
                                        AppLocale.belumAdaPaketLanggananDesc,
                                        [])
                                    : membershipType == 'bundling'
                                        ? context.formatString(
                                            AppLocale.belumAdaPaketBundlingDesc,
                                            [])
                                        : context.formatString(
                                            AppLocale.saatIniBelumAdaMembership,
                                            []),
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontWeight: FontWeight.w400,
                                  fontSize: ScreenUtil().scaleText * 14,
                                  fontFamily: 'Rubik',
                                  color: ColorBase.black80,
                                ),
                              ),
                              SizedBox(height: screenHeight * 0.3),
                            ]),
                      ),
                ],
              )
      ]),
    );
  }

  Widget _buildVenueDetailContent(
      {VenueDetail venueDetail, bool isLoading = false}) {
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;
    double screenWidth = MediaQuery.of(context).size.width;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Stack(
          children: [
            isLoading == true
                ? ImageBannerSliderWidget(
                    isLoading: true,
                    pageIndicatorMargin: 0,
                    height: screenHeight * 0.430271676,
                    autoPlay: true,
                  )
                : ImageBannerSliderWidget(
                    images: venueDetail.images,
                    venueName: venueDetail.name,
                    isLoading: false,
                    pageIndicatorMargin: 0,
                    height: screenHeight * 0.430271676,
                    autoPlay: true,
                  ),
            Stack(
              alignment: Alignment.topCenter,
              children: [
                Container(
                  //   padding: EdgeInsets.symmetric(vertical: 18, horizontal: 16),
                  margin: EdgeInsets.only(
                      left: 0, right: 0, top: screenHeight * 0.39),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Color.fromRGBO(0, 0, 0, 0.07),
                        offset: Offset(0.0, 3.0),
                        blurRadius: 7.0,
                      ),
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                          padding:
                              EdgeInsets.only(top: 18, left: 16, right: 16),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              isLoading
                                  ? Skeleton(width: 250, height: 24)
                                  : Text(venueDetail.name,
                                      style: TextStyle(
                                        fontFamily: 'Rubik',
                                        fontSize: ScreenUtil().scaleText * 22,
                                        color: ColorBase.black100,
                                        fontWeight: FontWeight.w500,
                                      )),
                              SizedBox(height: 8),
                              isLoading
                                  ? Row(
                                      children: [
                                        Skeleton(
                                            width: 14,
                                            height: 14,
                                            marginRight: 4),
                                        Skeleton(
                                            width: 50,
                                            height: 16,
                                            marginRight: 4),
                                        Skeleton(
                                            width: 50,
                                            height: 16,
                                            marginRight: 4),
                                      ],
                                    )
                                  : Row(
                                      children: [
                                        if (double.parse(venueDetail
                                                    .currentRating
                                                    .toString()) <
                                                4 &&
                                            venueDetail.totalReview.toInt() <
                                                10) ...[
                                          SizedBox(),
                                        ] else ...[
                                          if (double.parse(
                                                  venueDetail.currentRating) >
                                              0)
                                            Container(
                                              padding: EdgeInsets.symmetric(
                                                  horizontal: 6, vertical: 4),
                                              decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(6),
                                                color: ColorBase.primaryBlack,
                                              ),
                                              child: Row(children: [
                                                Padding(
                                                  padding: const EdgeInsets
                                                      .symmetric(horizontal: 0),
                                                  child: Image.asset(
                                                    'assets/images/ver3/white-star.png',
                                                    width: 12,
                                                    height: 12,
                                                  ),
                                                ),
                                                SizedBox(width: 4),
                                                Text(
                                                    double.parse(venueDetail
                                                            .currentRating)
                                                        .toStringAsFixed(1),
                                                    style: TextStyle(
                                                      fontFamily: 'Rubik',
                                                      fontSize: ScreenUtil()
                                                              .scaleText *
                                                          12,
                                                      color: ColorBase
                                                          .primaryWhite,
                                                      fontWeight:
                                                          FontWeight.w400,
                                                    )),
                                              ]),
                                            ),
                                          SizedBox(width: 6),
                                        ],
                                        if (!isLoading &&
                                            venueDetail.isVerified == 1 &&
                                            venueDetail.totalReview == 0)
                                          Container(
                                            padding: EdgeInsets.symmetric(
                                                horizontal: 4, vertical: 2),
                                            decoration: BoxDecoration(
                                                color: ColorBase.black100,
                                                borderRadius:
                                                    BorderRadius.circular(4),
                                                border: Border.all(
                                                    color: ColorBase.black100,
                                                    style: BorderStyle.solid,
                                                    width: 1)),
                                            child: Text(
                                              context.formatString(
                                                AppLocale.venueBaru,
                                                [],
                                              ),
                                              style: TextStyle(
                                                  color: ColorBase.primaryWhite,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          10,
                                                  fontWeight: FontWeight.w500),
                                            ),
                                          ),
                                        if (venueDetail.isVerified != 1)
                                          GestureDetector(
                                            onTap: () {
                                              setState(() {
                                                Navigator.of(context).pushNamed(
                                                    VenueReviewScreen.routeName,
                                                    arguments: {
                                                      'venue_id':
                                                          widget.venueId,
                                                      'venue_name': venueName
                                                    });
                                              });
                                            },
                                            child: Text(
                                              '${venueDetail.totalReview} ${context.formatString(
                                                AppLocale.ulasan,
                                                [],
                                              )}',
                                              style: TextStyle(
                                                  color: ColorBase.black80,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          12,
                                                  decoration:
                                                      TextDecoration.underline),
                                            ),
                                          ),
                                        SizedBox(width: 4),
                                        Text(
                                          ' · ',
                                          style: TextStyle(
                                              color: ColorBase.black80,
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 12),
                                        ),
                                        SizedBox(width: 4),
                                        GestureDetector(
                                            onTap: () {
                                              openMap(
                                                  double.parse(
                                                      venueDetail.latitude),
                                                  double.parse(
                                                      venueDetail.longitude));
                                            },
                                            child: Row(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.center,
                                              children: [
                                                Text(
                                                  '${Helpers.shortCityname(Helpers.capitalizeString(venueDetail.city.toLowerCase()))}',
                                                  style: TextStyle(
                                                      color: ColorBase.black80,
                                                      fontFamily: 'Rubik',
                                                      fontSize: ScreenUtil()
                                                              .scaleText *
                                                          12,
                                                      decoration: TextDecoration
                                                          .underline),
                                                ),
                                                Container(
                                                    margin:
                                                        EdgeInsets.only(top: 2),
                                                    height: 10,
                                                    width: 10,
                                                    child: Image.asset(
                                                      'assets/images/ver3/huge-icon-arrow-right.png',
                                                    )),
                                              ],
                                            )),
                                        if (venueDetail.isDpAvailable != 0)
                                          Text(
                                            ' · ',
                                            style:
                                                TextFontConst.RUBIK_REGULAR_12,
                                          ),
                                        if (venueDetail.isDpAvailable != 0)
                                          Row(
                                            children: [
                                              Container(
                                                height: 18,
                                                width: 30,
                                                child: Image.asset(
                                                  'assets/images/dp-primary-red.png',
                                                  fit: BoxFit.contain,
                                                ),
                                              ),
                                              SizedBox(width: 4),
                                              Text(
                                                context.formatString(
                                                  AppLocale.bisaDpDulu,
                                                  [],
                                                ),
                                                style: TextStyle(
                                                  color: ColorBase.black80,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          12,
                                                ),
                                              ),
                                            ],
                                          ),
                                      ],
                                    ),
                              SizedBox(height: 16),
                            ],
                          )),

                      // tabs
                      Container(
                        margin: EdgeInsets.only(
                            bottom: activeTab == 'booking' ? 20 : 12),
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              color: ColorBase.black10,
                            ),
                          ),
                        ),
                        child: SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.only(top: 0, left: 0),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    for (int x = 0; x < tab.length; x++)
                                      GestureDetector(
                                        onTap: () {
                                          setState(() {
                                            for (var i = 0;
                                                i < tab.length;
                                                i++) {
                                              tab[i]['is_active'] = false;
                                            }
                                            tab[x]['is_active'] = true;
                                            activeTab = tab[x]['value'];
                                          });

                                          if (activeTab == 'aktivitas' &&
                                              !isLoadActivity) {
                                            _loadActivity();
                                          }

                                          if (activeTab == 'coach' &&
                                              !isLoadCoach) {
                                            _loadCoach();
                                          }

                                          if (activeTab == 'komunitas' &&
                                              !isLoadCommunity) {
                                            _loadCommunity();
                                          }
                                        },
                                        child: Container(
                                          alignment: Alignment.center,
                                          // width: (screenWidth / 4),
                                          padding: EdgeInsets.only(
                                              bottom: 8, left: 32, right: 32),
                                          decoration: BoxDecoration(
                                              color: Colors.transparent,
                                              border: Border(
                                                  bottom: BorderSide(
                                                      width: 1,
                                                      color: tab[x]['is_active']
                                                          ? ColorBase.black100
                                                          : Colors
                                                              .transparent))),
                                          child: Text(
                                            tab[x]['name'] == 'Aktivitas'
                                                ? context.formatString(
                                                    AppLocale.aktivitas,
                                                    [],
                                                  )
                                                : tab[x]['name'] == 'Komunitas'
                                                    ? context.formatString(
                                                        AppLocale.komunitas,
                                                        [],
                                                      )
                                                    : tab[x]['name'],
                                            textAlign: TextAlign.center,
                                            style: TextStyle(
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                              fontWeight: tab[x]['is_active']
                                                  ? FontWeight.w500
                                                  : FontWeight.w400,
                                              color: tab[x]['is_active']
                                                  ? ColorBase.black100
                                                  : ColorBase.black60,
                                            ),
                                          ),
                                        ),
                                      ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),

                      // card tab booking
                      if (activeTab == 'booking')
                        Container(
                            padding: EdgeInsets.symmetric(horizontal: 16),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                // sample venue headline
                                isLoading
                                    ? Column(
                                        children: [
                                          for (var i = 0; i < 3; i++)
                                            Container(
                                              margin:
                                                  EdgeInsets.only(bottom: 16),
                                              child: Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: [
                                                  Column(
                                                    mainAxisSize:
                                                        MainAxisSize.min,
                                                    crossAxisAlignment:
                                                        CrossAxisAlignment
                                                            .start,
                                                    children: [
                                                      Row(
                                                        children: [
                                                          Skeleton(
                                                              width: 20,
                                                              height: 20),
                                                          SizedBox(
                                                            width: 6,
                                                          ),
                                                          Skeleton(
                                                              width: 100,
                                                              height: 20),
                                                        ],
                                                      ),
                                                      SizedBox(height: 4),
                                                      Container(
                                                        margin: EdgeInsets.only(
                                                            left: 26),
                                                        width:
                                                            screenWidth - 108,
                                                        child: Skeleton(
                                                            width: 100,
                                                            height: 20),
                                                      )
                                                    ],
                                                  ),
                                                ],
                                              ),
                                            )
                                        ],
                                      )
                                    : Column(
                                        children: [
                                          for (var i = 0;
                                              i <
                                                  venueDetail
                                                      .venueHighlights.length;
                                              i++)
                                            Container(
                                              margin:
                                                  EdgeInsets.only(bottom: 16),
                                              child: Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: [
                                                  Column(
                                                    mainAxisSize:
                                                        MainAxisSize.min,
                                                    crossAxisAlignment:
                                                        CrossAxisAlignment
                                                            .start,
                                                    children: [
                                                      Row(
                                                        children: [
                                                          Image(
                                                            image: NetworkImage(
                                                              BaseUrlConfig
                                                                      .baseAssetUrl +
                                                                  venueDetail
                                                                      .venueHighlights[
                                                                          i]
                                                                      .image,
                                                            ),
                                                            height: 20,
                                                            width: 20,
                                                            errorBuilder:
                                                                (BuildContext
                                                                        context,
                                                                    Object
                                                                        exception,
                                                                    StackTrace
                                                                        stackTrace) {
                                                              return Image
                                                                  .asset(
                                                                'assets/images/avatar.png',
                                                                height: 20,
                                                                width: 20,
                                                              );
                                                            },
                                                          ),
                                                          SizedBox(
                                                            width: 6,
                                                          ),
                                                          Text(
                                                            venueDetail
                                                                        .venueHighlights[
                                                                            i]
                                                                        .variableHeadline ==
                                                                    'lapangan_kualitas_tinggi'
                                                                ? context.formatString(
                                                                    AppLocale
                                                                        .lapangan_kualitas_tinggi,
                                                                    [])
                                                                : venueDetail
                                                                            .venueHighlights[
                                                                                i]
                                                                            .variableHeadline ==
                                                                        'penerangan_optimal'
                                                                    ? context.formatString(
                                                                        AppLocale
                                                                            .penerangan_optimal,
                                                                        [])
                                                                    : venueDetail.venueHighlights[i].variableHeadline ==
                                                                            'kebersihan_terjaga'
                                                                        ? context.formatString(
                                                                            AppLocale
                                                                                .kebersihan_terjaga,
                                                                            [])
                                                                        : venueDetail.venueHighlights[i].variableHeadline ==
                                                                                'tersedia_ruang_ganti_shower'
                                                                            ? context.formatString(AppLocale.tersedia_ruang_ganti_shower,
                                                                                [])
                                                                            : venueDetail.venueHighlights[i].variableHeadline == 'lahan_parkir_luas'
                                                                                ? context.formatString(AppLocale.lahan_parkir_luas, [])
                                                                                : venueDetail.venueHighlights[i].variableHeadline == 'tempat_nongkrong_nyaman'
                                                                                    ? context.formatString(AppLocale.tempat_nongkrong_nyaman, [])
                                                                                    : venueDetail.venueHighlights[i].variableHeadline == 'jam_operasional_fleksibel'
                                                                                        ? context.formatString(AppLocale.jam_operasional_fleksibel, [])
                                                                                        : venueDetail.venueHighlights[i].variableHeadline == 'dekat_lokasi_strategis'
                                                                                            ? context.formatString(AppLocale.dekat_lokasi_strategis, [])
                                                                                            : venueDetail.venueHighlights[i].variableHeadline == 'pelayanan_ramah_responsif'
                                                                                                ? context.formatString(AppLocale.pelayanan_ramah_responsif, [])
                                                                                                : venueDetail.venueHighlights[i].variableHeadline == 'venue_favorit_komunitas'
                                                                                                    ? context.formatString(AppLocale.venue_favorit_komunitas, [])
                                                                                                    : venueDetail.venueHighlights[i].variableHeadline == 'ac_sejuk_ventilasi_baik'
                                                                                                        ? context.formatString(AppLocale.ac_sejuk_ventilasi_baik, [])
                                                                                                        : venueDetail.venueHighlights[i].variableHeadline == 'venue_ramah_anak_keluarga'
                                                                                                            ? context.formatString(AppLocale.venue_ramah_anak_keluarga, [])
                                                                                                            : venueDetail.venueHighlights[i].variableHeadline == 'gabung_membership_main_lebih_hemat'
                                                                                                                ? context.formatString(AppLocale.gabung_membership_main_lebih_hemat, [])
                                                                                                                : venueDetail.venueHighlights[i].variableHeadline == 'banyak_pilihan_produk_tambahan'
                                                                                                                    ? context.formatString(AppLocale.banyak_pilihan_produk_tambahan, [])
                                                                                                                    : '-',
                                                            style: TextStyle(
                                                              fontFamily:
                                                                  'Rubik',
                                                              fontSize: ScreenUtil()
                                                                      .scaleText *
                                                                  14,
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w500,
                                                              color: ColorBase
                                                                  .black100,
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                      SizedBox(height: 4),
                                                      Container(
                                                        margin: EdgeInsets.only(
                                                            left: 26),
                                                        width:
                                                            screenWidth - 108,
                                                        child: Text(
                                                          venueDetail
                                                                      .venueHighlights[
                                                                          i]
                                                                      .variableDescription ==
                                                                  'dibangun_dengan_material_terbaik_untuk_performa_maksimal'
                                                              ? context.formatString(
                                                                  AppLocale
                                                                      .dibangun_dengan_material_terbaik_untuk_performa_maksimal,
                                                                  [])
                                                              : venueDetail
                                                                          .venueHighlights[
                                                                              i]
                                                                          .variableDescription ==
                                                                      'dilengkapi_lampu_led_terang_merata_cocok_untuk_permainan_malam_hari'
                                                                  ? context.formatString(
                                                                      AppLocale
                                                                          .dilengkapi_lampu_led_terang_merata_cocok_untuk_permainan_malam_hari,
                                                                      [])
                                                                  : venueDetail
                                                                              .venueHighlights[
                                                                                  i]
                                                                              .variableDescription ==
                                                                          'area_lapangan_ruang_tunggu_dan_toilet_dibersihkan_secara_rutin'
                                                                      ? context.formatString(
                                                                          AppLocale
                                                                              .area_lapangan_ruang_tunggu_dan_toilet_dibersihkan_secara_rutin,
                                                                          [])
                                                                      : venueDetail.venueHighlights[i].variableDescription ==
                                                                              'nikmati_kenyamanan_setelah_bermain_dengan_fasilitas_lengkap'
                                                                          ? context.formatString(
                                                                              AppLocale.nikmati_kenyamanan_setelah_bermain_dengan_fasilitas_lengkap,
                                                                              [])
                                                                          : venueDetail.venueHighlights[i].variableDescription == 'area_parkir_aman_dan_mudah_diakses_untuk_kendaraan_roda_dua_dan_empat'
                                                                              ? context.formatString(AppLocale.area_parkir_aman_dan_mudah_diakses_untuk_kendaraan_roda_dua_dan_empat, [])
                                                                              : venueDetail.venueHighlights[i].variableDescription == 'ada_kafe_area_duduk_untuk_istirahat_ngopi_atau_menunggu_giliran_bermain'
                                                                                  ? context.formatString(AppLocale.ada_kafe_area_duduk_untuk_istirahat_ngopi_atau_menunggu_giliran_bermain, [])
                                                                                  : venueDetail.venueHighlights[i].variableDescription == 'buka_hingga_malam_cocok_untuk_pekerja_dan_pelajar'
                                                                                      ? context.formatString(AppLocale.buka_hingga_malam_cocok_untuk_pekerja_dan_pelajar, [])
                                                                                      : venueDetail.venueHighlights[i].variableDescription == 'berada_di_pusat_kota_mudah_dijangkau_dari_mana_saja'
                                                                                          ? context.formatString(AppLocale.berada_di_pusat_kota_mudah_dijangkau_dari_mana_saja, [])
                                                                                          : venueDetail.venueHighlights[i].variableDescription == 'tim_kami_siap_membantu_semua_kebutuhan_anda'
                                                                                              ? context.formatString(AppLocale.tim_kami_siap_membantu_semua_kebutuhan_anda, [])
                                                                                              : venueDetail.venueHighlights[i].variableDescription == 'rekomendasi_dari_berbagai_komunitas_olahraga_lokal'
                                                                                                  ? context.formatString(AppLocale.rekomendasi_dari_berbagai_komunitas_olahraga_lokal, [])
                                                                                                  : venueDetail.venueHighlights[i].variableDescription == 'udara_segar_membuat_permainan_lebih_nyaman'
                                                                                                      ? context.formatString(AppLocale.udara_segar_membuat_permainan_lebih_nyaman, [])
                                                                                                      : venueDetail.venueHighlights[i].variableDescription == 'cocok_untuk_latihan_anak_atau_rekreasi_keluarga'
                                                                                                          ? context.formatString(AppLocale.cocok_untuk_latihan_anak_atau_rekreasi_keluarga, [])
                                                                                                          : venueDetail.venueHighlights[i].variableDescription == 'dapatkan_potongan_harga_dengan_membeli_paket_member'
                                                                                                              ? context.formatString(AppLocale.dapatkan_potongan_harga_dengan_membeli_paket_member, [])
                                                                                                              : venueDetail.venueHighlights[i].variableDescription == 'tambahkan_sewa_raket_bola_minuman_hingga_pelatih_langsung_dari_aplikasi'
                                                                                                                  ? context.formatString(AppLocale.tambahkan_sewa_raket_bola_minuman_hingga_pelatih_langsung_dari_aplikasi, [])
                                                                                                                  : '-',
                                                          style: TextStyle(
                                                            fontFamily: 'Rubik',
                                                            fontSize: ScreenUtil()
                                                                    .scaleText *
                                                                12,
                                                            fontWeight:
                                                                FontWeight.w400,
                                                            color: ColorBase
                                                                .black80,
                                                          ),
                                                        ),
                                                      )
                                                    ],
                                                  ),
                                                ],
                                              ),
                                            ),
                                        ],
                                      ),

                                // matchCam
                                isLoading
                                    ? SizedBox(height: 0)
                                    : (venueDetail.matchcamVenue == 1)
                                        ? GestureDetector(
                                            onTap: () async {
                                              if (venueDetail
                                                      .venueSportMatchcam >
                                                  0) {
                                                int ada = 0;
                                                category
                                                    .forEach((categoryData) {
                                                  if (categoryData.id ==
                                                      venueDetail
                                                          .venueSportMatchcam) {
                                                    ada = 1;
                                                    chooseField(categoryData);
                                                  }
                                                });
                                                if (ada == 0) {
                                                  _sportSelectorModal(
                                                      context,
                                                      screenWidth,
                                                      screenHeight,
                                                      category);
                                                }
                                              } else {
                                                if (category.length == 1) {
                                                  int result =
                                                      await _checkPickedSport(
                                                          category[0]);

                                                  if (result == 0) {
                                                    chooseField(category[0]);
                                                  } else {}
                                                } else {
                                                  _sportSelectorModal(
                                                      context,
                                                      screenWidth,
                                                      screenHeight,
                                                      category);
                                                }
                                              }

                                              // MatchCamGeneralInfoBottomSheet(
                                              //   theContext: context,
                                              //   matchCamResponse: (p0, p1) {
                                              //     if (p0 == true) {
                                              //       // Navigator.of(context).pushNamed(
                                              //       //     VenueDetailScreen.routeName,
                                              //       //     arguments: {
                                              //       //       'venue_id': venue.id,
                                              //       //       'integration_type':
                                              //       //           widget.integrationType,
                                              //       //     });
                                              //     }
                                              //   },
                                              // );
                                            },
                                            child: Container(
                                              child: Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: [
                                                  Column(
                                                    mainAxisSize:
                                                        MainAxisSize.min,
                                                    crossAxisAlignment:
                                                        CrossAxisAlignment
                                                            .start,
                                                    children: [
                                                      Row(
                                                        children: [
                                                          Image.asset(
                                                            'assets/images/ver3/camera-border.png',
                                                            width: 20,
                                                            height: 20,
                                                          ),
                                                          // Container(
                                                          //   width: 28,
                                                          //   height: 14,
                                                          //   decoration: BoxDecoration(
                                                          //       borderRadius:
                                                          //           BorderRadius.circular(4),
                                                          //       color: ColorBase.black60),
                                                          // ),
                                                          SizedBox(
                                                            width: 6,
                                                          ),
                                                          Text(
                                                            context
                                                                .formatString(
                                                              AppLocale
                                                                  .matchCam,
                                                              [],
                                                            ),
                                                            style: TextStyle(
                                                              fontFamily:
                                                                  'Rubik',
                                                              fontSize: ScreenUtil()
                                                                      .scaleText *
                                                                  14,
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w500,
                                                              color: ColorBase
                                                                  .black100,
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                      SizedBox(height: 4),
                                                      Container(
                                                        margin: EdgeInsets.only(
                                                            left: 26),
                                                        width:
                                                            screenWidth - 108,
                                                        child: Text(
                                                          context.formatString(
                                                            AppLocale
                                                                .rekam_aksi_kamu_di_lapangan_dan_abadikan_momen_momen_terbaik_dengan_MatchCam,
                                                            [],
                                                          ),
                                                          style: TextStyle(
                                                            fontFamily: 'Rubik',
                                                            fontSize: ScreenUtil()
                                                                    .scaleText *
                                                                12,
                                                            fontWeight:
                                                                FontWeight.w400,
                                                            color: ColorBase
                                                                .black100,
                                                          ),
                                                        ),
                                                      ),
                                                      SizedBox(height: 4),
                                                      Container(
                                                          margin:
                                                              EdgeInsets.only(
                                                                  left: 26),
                                                          width:
                                                              screenWidth - 108,
                                                          child: Row(
                                                            children: [
                                                              Text(
                                                                context
                                                                    .formatString(
                                                                  AppLocale
                                                                      .lihatLapangan,
                                                                  [],
                                                                ),
                                                                style:
                                                                    TextStyle(
                                                                  color: ColorBase
                                                                      .primaryRed,
                                                                  fontFamily:
                                                                      'Rubik',
                                                                  fontSize:
                                                                      ScreenUtil()
                                                                              .scaleText *
                                                                          12,
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .w500,
                                                                ),
                                                              ),
                                                              SizedBox(
                                                                  width: 2),
                                                              SvgPicture.asset(
                                                                'assets/images/ver3/svg/arrow-right.svg',
                                                                height: ScreenUtil()
                                                                        .scaleText *
                                                                    16,
                                                                width: ScreenUtil()
                                                                        .scaleText *
                                                                    16,
                                                                color: ColorBase
                                                                    .primaryRed,
                                                              ),
                                                            ],
                                                          )),
                                                    ],
                                                  ),
                                                ],
                                              ),
                                            ),
                                          )
                                        : SizedBox(height: 0),

                                if (!isLoading)
                                  if (venueDetail.matchcamVenue == 1 ||
                                      venueDetail.venueHighlights.length > 0)
                                    Padding(
                                      padding:
                                          EdgeInsets.symmetric(vertical: 20),
                                      child: DottedLine(
                                          dashColor: ColorBase.black10),
                                    ),

                                // sports
                                isLoading
                                    ? Row(
                                        children: [
                                          Skeleton(
                                              width: 16,
                                              height: 16,
                                              marginRight: 4),
                                          Skeleton(width: 50, height: 16),
                                        ],
                                      )
                                    : Container(
                                        child: Wrap(
                                          children: [
                                            for (var i = 0;
                                                i < venueDetail.sports.length;
                                                i++)
                                              Row(
                                                mainAxisSize: MainAxisSize.min,
                                                children: [
                                                  Container(
                                                      margin: EdgeInsets.only(
                                                          bottom: 8),
                                                      decoration: BoxDecoration(
                                                          color: Color(int.parse(
                                                              '0xfff5f5f5')),
                                                          borderRadius:
                                                              BorderRadius
                                                                  .circular(8)),
                                                      padding:
                                                          EdgeInsets.symmetric(
                                                              vertical: 7,
                                                              horizontal: 8),
                                                      child: Row(children: [
                                                        Container(
                                                            width: 16,
                                                            height: 16,
                                                            child: SvgPicture.network(
                                                                BaseUrlConfig
                                                                        .baseAssetUrl +
                                                                    venueDetail
                                                                        .sports[
                                                                            i]
                                                                        .svgPicture,
                                                                color: ColorBase
                                                                    .black100)),
                                                        SizedBox(width: 4),
                                                        Text(
                                                          venueDetail
                                                              .sports[i].name,
                                                          style: TextStyle(
                                                            color: ColorBase
                                                                .black100,
                                                            fontFamily: 'Rubik',
                                                            fontSize: ScreenUtil()
                                                                    .scaleText *
                                                                12,
                                                            fontWeight:
                                                                FontWeight.w400,
                                                          ),
                                                        ),
                                                      ])),
                                                  if (i <
                                                      venueDetail
                                                              .sports.length -
                                                          1)
                                                    SizedBox(width: 6)
                                                ],
                                              ),
                                          ],
                                        ),
                                      ),

                                // description
                                if (isLoading)
                                  Padding(
                                    padding:
                                        EdgeInsets.only(top: 12, bottom: 8),
                                    child: Divider(
                                      color: ColorBase.black10,
                                    ),
                                  ),
                                isLoading
                                    ? Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Skeleton(
                                                  width: 75,
                                                  height: 16,
                                                  marginBottom: 8),
                                              Skeleton(
                                                  width: screenWidth - 64,
                                                  height: 45),
                                              SizedBox(height: 12),
                                              Skeleton(
                                                  width: 75,
                                                  height: 16,
                                                  marginBottom: 8),
                                              Skeleton(
                                                  width: screenWidth - 64,
                                                  height: 45),
                                            ],
                                          )
                                        ],
                                      )
                                    : Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          if (description != '')
                                            Padding(
                                              padding: EdgeInsets.symmetric(
                                                  vertical: 20),
                                              child: DottedLine(
                                                  dashColor: ColorBase.black10),
                                            ),
                                          if (description != '')
                                            Text(
                                              context.formatString(
                                                AppLocale.deskripsi,
                                                [],
                                              ),
                                              style: TextStyle(
                                                color: ColorBase.black100,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                                fontWeight: FontWeight.w500,
                                              ),
                                            ),
                                          if (description != '')
                                            SizedBox(height: 2),
                                          if (description != '')
                                            Text(
                                              description,
                                              style: TextStyle(
                                                color: ColorBase.black80,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                              ),
                                              maxLines: 3,
                                              overflow: TextOverflow.ellipsis,
                                            ),
                                          if (venueRules != '')
                                            SizedBox(height: 20),
                                          if (venueRules != '')
                                            Text(
                                              context.formatString(
                                                AppLocale.peraturanVenue,
                                                [],
                                              ),
                                              style: TextStyle(
                                                color: ColorBase.black100,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                                fontWeight: FontWeight.w500,
                                              ),
                                            ),
                                          if (venueRules != '')
                                            SizedBox(height: 2),
                                          if (venueRules != '')
                                            Text(
                                              venueRules,
                                              style: TextStyle(
                                                color: ColorBase.black80,
                                                fontFamily: 'Rubik',
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                              ),
                                              maxLines: 3,
                                              overflow: TextOverflow.ellipsis,
                                            ),
                                          SizedBox(height: 12),
                                          if (!isLoading)
                                            GestureDetector(
                                                onTap: () {
                                                  Navigator.pushNamed(
                                                      context,
                                                      AboutVenueScreen
                                                          .routeName,
                                                      arguments: {
                                                        'description':
                                                            description,
                                                        'venue_rules':
                                                            venueRules,
                                                      });
                                                },
                                                child: Row(
                                                  children: [
                                                    Text(
                                                      context.formatString(
                                                        AppLocale.selengkapnya,
                                                        [],
                                                      ),
                                                      style: TextStyle(
                                                        color: ColorBase
                                                            .primaryRed,
                                                        fontFamily: 'Rubik',
                                                        fontSize: ScreenUtil()
                                                                .scaleText *
                                                            12,
                                                        fontWeight:
                                                            FontWeight.w500,
                                                      ),
                                                    ),
                                                    SizedBox(width: 2),
                                                    SvgPicture.asset(
                                                      'assets/images/ver3/svg/arrow-right.svg',
                                                      height: ScreenUtil()
                                                              .scaleText *
                                                          16,
                                                      width: ScreenUtil()
                                                              .scaleText *
                                                          16,
                                                      color:
                                                          ColorBase.primaryRed,
                                                    ),
                                                  ],
                                                )),
                                        ],
                                      ),

                                // card facility
                                SizedBox(height: 16),
                                isLoading
                                    ? _buildFacilitiesWidget(isLoading: true)
                                    : _buildFacilitiesWidget(
                                        facilities: venueDetail.facilities,
                                        descPoints: venueDetail.descPoints),

                                // divider
                                Container(
                                  margin: EdgeInsets.only(top: 20, bottom: 20),
                                  child: Column(
                                    children: [
                                      Container(
                                          height: 2,
                                          width: screenWidth,
                                          color: ColorBase.black10,
                                          child: SizedBox(width: 0)),
                                      Container(
                                          height: 6,
                                          width: screenWidth,
                                          color: ColorBase.black5,
                                          child: SizedBox(width: 0))
                                    ],
                                  ),
                                ),

                                if (memberships.length > 0)
                                  Container(
                                    child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            context.formatString(
                                              AppLocale.paketMembership,
                                              [],
                                            ),
                                            style: TextStyle(
                                              color: ColorBase.black100,
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 16,
                                              fontWeight: FontWeight.w500,
                                            ),
                                          ),
                                          SizedBox(height: 4),
                                          Text(
                                            context.formatString(
                                                  AppLocale.jadwalPastiAman,
                                                  [],
                                                ) +
                                                ' · ' +
                                                context.formatString(
                                                  AppLocale.potonganHargaKhusus,
                                                  [],
                                                ),
                                            style: TextStyle(
                                              color: ColorBase.black80,
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 12,
                                              fontWeight: FontWeight.w400,
                                            ),
                                          ),
                                          SizedBox(height: 12),
                                        ]),
                                  ),

                                if (memberships.length > 0)
                                  _buildHorizontalMembershipVenueContent(
                                      membershipVenueList: memberships),

                                // divider
                                Container(
                                  margin: EdgeInsets.only(top: 20, bottom: 20),
                                  child: Column(
                                    children: [
                                      Container(
                                          height: 2,
                                          width: screenWidth,
                                          color: ColorBase.black10,
                                          child: SizedBox(width: 0)),
                                      Container(
                                          height: 6,
                                          width: screenWidth,
                                          color: ColorBase.black5,
                                          child: SizedBox(width: 0))
                                    ],
                                  ),
                                ),

                                // card review
                                Container(
                                  child: Row(children: [
                                    isLoading
                                        ? Skeleton(
                                            width: 75,
                                            height: 24,
                                          )
                                        : Text(
                                            context.formatString(
                                              AppLocale.ulasanSectionTitle,
                                              [],
                                            ),
                                            style: TextStyle(
                                              color: ColorBase.black100,
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 16,
                                              fontWeight: FontWeight.w500,
                                            ),
                                          ),
                                  ]),
                                ),
                                if (!isLoading)
                                  Padding(
                                    padding: EdgeInsets.symmetric(
                                        vertical: 16, horizontal: 0),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Container(
                                          decoration: BoxDecoration(
                                              color: ColorBase.black10,
                                              border: Border.all(
                                                  color: ColorBase.black10),
                                              borderRadius:
                                                  BorderRadius.circular(32)),
                                          child: GestureDetector(
                                            onTap: () {
                                              setState(() {
                                                if (reviewValue == 'field') {
                                                  reviewValue = 'activity';
                                                } else {
                                                  reviewValue = 'field';
                                                }
                                                _refreshData();
                                              });
                                            },
                                            child: Row(
                                              children: [
                                                Container(
                                                  padding: EdgeInsets.symmetric(
                                                      horizontal: 14,
                                                      vertical: 8),
                                                  decoration: BoxDecoration(
                                                      color: (reviewValue ==
                                                              'field')
                                                          ? Colors.white
                                                          : ColorBase.black10,
                                                      border: Border.all(
                                                          color: (reviewValue ==
                                                                  'field')
                                                              ? Colors.white
                                                              : ColorBase
                                                                  .black10),
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              32)),
                                                  child: Text(
                                                    context.formatString(
                                                        AppLocale.sewaLapangan,
                                                        []),
                                                    style: TextStyle(
                                                      color: reviewValue ==
                                                              'field'
                                                          ? ColorBase.black100
                                                          : ColorBase.black60,
                                                      fontFamily: 'Rubik',
                                                      fontWeight:
                                                          reviewValue == 'field'
                                                              ? FontWeight.w500
                                                              : FontWeight.w400,
                                                      fontSize: ScreenUtil()
                                                              .scaleText *
                                                          12,
                                                    ),
                                                  ),
                                                ),
                                                Container(
                                                  padding: EdgeInsets.symmetric(
                                                      horizontal: 14,
                                                      vertical: 8),
                                                  decoration: BoxDecoration(
                                                      color: (reviewValue !=
                                                              'field')
                                                          ? Colors.white
                                                          : ColorBase.black10,
                                                      border: Border.all(
                                                          color: (reviewValue !=
                                                                  'field')
                                                              ? Colors.white
                                                              : ColorBase
                                                                  .black10),
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              32)),
                                                  child: Text(
                                                    context.formatString(
                                                        AppLocale.aktivitas,
                                                        []),
                                                    style: TextStyle(
                                                      color: reviewValue !=
                                                              'field'
                                                          ? ColorBase.black100
                                                          : ColorBase.black60,
                                                      fontFamily: 'Rubik',
                                                      fontWeight:
                                                          reviewValue != 'field'
                                                              ? FontWeight.w500
                                                              : FontWeight.w400,
                                                      fontSize: ScreenUtil()
                                                              .scaleText *
                                                          12,
                                                    ),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),

                                BlocBuilder<VenueDetailBloc, VenueDetailState>(
                                  bloc: reviewVenueBloc,
                                  buildWhen: (previous, current) {
                                    if (current is ReviewVenueLoading ||
                                        current is ReviewVenueFailure ||
                                        current is ReviewVenueLoaded) {
                                      return true;
                                    }
                                    return false;
                                  },
                                  builder: (ctx, state) {
                                    if (state is ReviewVenueLoaded) {
                                      if (state.venueReview.summary.total > 0) {
                                        if (reviewValue == 'field') {
                                          venueReviews = state.venueReview;
                                        }
                                      }
                                    }

                                    return SizedBox(width: 0);
                                  },
                                ),

                                // show review booking venue
                                if (venueReviews != null)
                                  Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      if (reviewValue == 'field')
                                        _buildReviewContent(
                                            venueReview: venueReviews),
                                    ],
                                  ),

                                if (venueReviews == null &&
                                    reviewValue == 'field')
                                  Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Container(
                                        width: double.infinity,
                                        child: Column(
                                          children: [
                                            SizedBox(height: 24),
                                            Image(
                                              image: AssetImage(
                                                  'assets/images/empty-state.png'),
                                              width: 117,
                                            ),
                                            SizedBox(height: 16),
                                            Text(
                                              context.formatString(
                                                  AppLocale.belumAdaUlasan, []),
                                              style: TextStyle(
                                                fontWeight: FontWeight.w500,
                                                fontSize:
                                                    ScreenUtil().scaleText * 14,
                                                fontFamily: 'Rubik',
                                              ),
                                            ),
                                            SizedBox(height: 4),
                                            Text(
                                              context.formatString(
                                                  AppLocale
                                                      .venueBelumMemilikiUlasanSewaLapangan,
                                                  []),
                                              style: TextStyle(
                                                  fontWeight: FontWeight.w400,
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          12,
                                                  fontFamily: 'Rubik',
                                                  color: ColorBase.black80),
                                            ),
                                            SizedBox(height: 48),
                                          ],
                                        ),
                                      )
                                    ],
                                  ),

                                BlocBuilder<VenueDetailBloc, VenueDetailState>(
                                  bloc: reviewVenueBloc,
                                  buildWhen: (previous, current) {
                                    if (current is ReviewOpenPlayVenueLoading ||
                                        current is ReviewOpenPlayVenueFailure ||
                                        current is ReviewOpenPlayVenueLoaded) {
                                      return true;
                                    }
                                    return false;
                                  },
                                  builder: (ctx, state) {
                                    if (state is ReviewOpenPlayVenueLoaded) {
                                      venueOpenPlayRatingStar = int.parse(state
                                          .communityReview
                                          .summary
                                          .openPlayRating
                                          .toString()
                                          .substring(0, 1));

                                      customVenueOpenPlayRatingStar =
                                          double.parse(state.communityReview
                                                  .summary.openPlayRating)
                                              .toStringAsFixed(1);
                                      splitRatingOpenPlay =
                                          customVenueOpenPlayRatingStar
                                              .split('.');
                                      ratingNotFullOpenPlay =
                                          int.parse(splitRatingOpenPlay[1]) != 0
                                              ? 1
                                              : 0;

                                      return (state.communityReview.summary
                                                  .countOpenPlayReview >
                                              0)
                                          ? Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                if (reviewValue == 'activity')
                                                  _buildOpenPlayReviewContent(
                                                      communityReview: state
                                                          .communityReview),
                                              ],
                                            )
                                          : SizedBox(width: 0);
                                    } else if (state
                                            is ReviewOpenPlayVenueFailure &&
                                        reviewValue == 'activity') {
                                      return Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Container(
                                            width: double.infinity,
                                            child: Column(
                                              children: [
                                                SizedBox(height: 24),
                                                Image(
                                                  image: AssetImage(
                                                      'assets/images/empty-state.png'),
                                                  width: 117,
                                                ),
                                                SizedBox(height: 16),
                                                Text(
                                                  context.formatString(
                                                      AppLocale.belumAdaUlasan,
                                                      []),
                                                  style: TextStyle(
                                                    fontWeight: FontWeight.w500,
                                                    fontSize:
                                                        ScreenUtil().scaleText *
                                                            14,
                                                    fontFamily: 'Rubik',
                                                  ),
                                                ),
                                                SizedBox(height: 4),
                                                Text(
                                                  context.formatString(
                                                      AppLocale
                                                          .venueBelumMemilikiUlasanAktivitas,
                                                      []),
                                                  style: TextStyle(
                                                      fontWeight:
                                                          FontWeight.w400,
                                                      fontSize: ScreenUtil()
                                                              .scaleText *
                                                          12,
                                                      fontFamily: 'Rubik',
                                                      color: ColorBase.black80),
                                                ),
                                                SizedBox(height: 48),
                                              ],
                                            ),
                                          )
                                        ],
                                      );
                                    } else if (state
                                            is ReviewOpenPlayVenueFailure &&
                                        reviewValue != 'activity') {
                                      return SizedBox(width: 0);
                                    } else {
                                      return Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          _buildReviewContent(isLoading: true),
                                          Container(
                                            padding: EdgeInsets.symmetric(
                                                horizontal: 16, vertical: 20),
                                            child: Divider(
                                                color: ColorBase.black10),
                                          ),
                                        ],
                                      );
                                    }
                                  },
                                ),

                                //   card reschedule & pembatalan
                                BlocConsumer<VenueDetailBloc, VenueDetailState>(
                                  bloc: venueDetailBloc,
                                  listener: (ctx, state) {
                                    if (state is VenueDetailLoaded) {
                                      setState(() {});
                                    }
                                  },
                                  buildWhen: (previous, current) {
                                    if (current is VenueDetailLoading ||
                                        current is VenueDetailFailure ||
                                        current is VenueDetailLoaded) {
                                      return true;
                                    }
                                    return false;
                                  },
                                  builder: (ctx, state) {
                                    if (cancelPolicy != null) {
                                      return _buildRescheduleRefundContent();
                                    } else {
                                      return SizedBox(width: 0);
                                    }
                                  },
                                ),

                                BlocBuilder<VenueDetailBloc, VenueDetailState>(
                                  bloc: otherVenuesBloc,
                                  buildWhen: (previous, current) {
                                    if (current is OtherVenuesLoading ||
                                        current is OtherVenuesFailure ||
                                        current is OtherVenuesLoaded) {
                                      return true;
                                    }
                                    return false;
                                  },
                                  builder: (ctx, state) {
                                    if (state is OtherVenuesLoaded) {
                                      return (state.otherVenueList.length > 0 &&
                                              isDisableShowNearbyVenue == 0)
                                          ? _buildOtherVenuesContent(
                                              otherVenueList:
                                                  state.otherVenueList)
                                          : SizedBox(width: 0);
                                    } else {
                                      return _buildOtherVenuesContent(
                                          isLoading: true);
                                    }
                                  },
                                ),
                                // end section tab booking
                              ],
                            )),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildBottomBarWidget() {
    MediaQueryData queryData = MediaQuery.of(context);
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = queryData.size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;

    return activeTab != 'booking'
        ? SizedBox(width: 0)
        : Container(
            width: double.infinity,
            height: maxVoucher != null ? 96 : 54,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                if (maxVoucher == null)
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 0.7, // soften the shadow
                    offset: Offset(
                      0.0, // Move to right 10  horizontally
                      -1.0, // Move to bottom 5 Vertically
                    ),
                  )
              ],
            ),
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              if (maxVoucher != null)
                GestureDetector(
                  onTap: () async {
                    LoadingDialogWidget.show(context);
                    VenueVoucherModel response = await venueVoucherRepository
                        .profileList(widget.context, venueId: widget.venueId);

                    if (response.statusCode == 200) {
                      LoadingDialogWidget.hide(context);
                      vouchers.clear();
                      vouchers.addAll(response.data);
                      _availableVoucherModal(
                          context, screenWidth, screenHeight);
                    } else {
                      LoadingDialogWidget.hide(context);
                      customFlutterToast(
                        context: context,
                        msg:
                            'Gagal mengambil daftar voucher. Mohon coba beberapa saat lagi',
                        customToastType: CustomToastType.ERROR,
                      );
                    }
                  },
                  child: Container(
                      margin: EdgeInsets.only(bottom: 8),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 12, vertical: 8),
                      decoration: BoxDecoration(
                        color: Colors.blue.shade100,
                        borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(8),
                          topRight: Radius.circular(8),
                        ),
                      ),
                      child: Center(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Image.asset(
                              'assets/images/ver3/discount-fire-blue.png',
                              height: 16,
                              width: 16,
                            ),
                            SizedBox(width: 6),
                            Text(
                              (maxVoucher.maxAmount > 0 &&
                                      maxVoucher.maxAmount != null &&
                                      maxVoucher.discountType == "percentage")
                                  ? context.formatString(
                                        AppLocale.adaPromo,
                                        ['${maxVoucher.amount.toString()}%'],
                                      ) +
                                      ' ' +
                                      context.formatString(
                                        AppLocale.hinggaDiVenueIni,
                                        [
                                          'Rp${Helpers.formatRupiah(maxVoucher.maxAmount.toString())}'
                                        ],
                                      )
                                  : (maxVoucher.maxAmount > 0 &&
                                          maxVoucher.maxAmount != null)
                                      ? context.formatString(
                                          AppLocale.adaPromoHinggaDiVenueIni,
                                          [
                                            'Rp${Helpers.formatRupiah(maxVoucher.maxAmount.toString())}'
                                          ],
                                        )
                                      : (maxVoucher.discountType ==
                                              "percentage")
                                          ? context.formatString(
                                              AppLocale
                                                  .adaPromoHinggaDiVenueIni,
                                              [
                                                '${maxVoucher.amount.toString()}%'
                                              ],
                                            )
                                          : context.formatString(
                                                  AppLocale
                                                      .promo_diskon_senilai,
                                                  []) +
                                              ' ${Helpers.formatRupiah(maxVoucher.amount.toString())}',
                              style: TextStyle(
                                fontFamily: 'Rubik',
                                fontSize: ScreenUtil().scaleText * 13,
                                fontWeight: FontWeight.w400,
                                color: Color(0xFF1885D4),
                              ),
                            ),
                            SizedBox(width: 4),
                            Image.asset(
                              'assets/images/ver3/arrow-right-blue.png',
                              height: 14,
                              width: 14,
                            ),
                          ],
                        ),
                      )),
                ),
              Container(
                  padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                  child: Row(
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                                context.formatString(
                                  AppLocale.mulaiDari,
                                  [],
                                ),
                                style: TextStyle(
                                    fontSize: ScreenUtil().scaleText * 12,
                                    fontFamily: 'Rubik',
                                    fontWeight: FontWeight.w500,
                                    color: ColorBase.black60)),
                            SizedBox(height: 2),
                            Row(
                              children: [
                                Text(
                                    'Rp${Helpers.formatRupiah(basePrice.toString())}',
                                    style: TextStyle(
                                        fontSize: ScreenUtil().scaleText * 18,
                                        fontFamily: 'Rubik',
                                        fontWeight: FontWeight.w500,
                                        color: ColorBase.primaryBlack)),
                              ],
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: 8),
                      // booking button
                      Container(
                        width: screenWidth * 0.4,
                        child: GestureDetector(
                          onTap: () async {
                            if (category.length == 1) {
                              int result = await _checkPickedSport(category[0]);

                              if (result == 0) {
                                chooseField(category[0]);
                              } else {}
                            } else {
                              _sportSelectorModal(
                                  context, screenWidth, screenHeight, category);
                            }
                          },
                          child: Container(
                            height: 38,
                            decoration: BoxDecoration(
                              color: ColorBase.primaryBlack,
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Center(
                              child: Text(
                                  context.formatString(
                                    AppLocale.pilih_jadwal,
                                    [],
                                  ),
                                  style: TextStyle(
                                      fontSize: ScreenUtil().scaleText * 14,
                                      fontFamily: 'Rubik',
                                      fontWeight: FontWeight.w500,
                                      color: ColorBase.primaryWhite)),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ))
            ]),
          );
  }

  Widget _buildBottomBarWidgetLoading() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 0.7, // soften the shadow
            offset: Offset(
              0.0, // Move to right 10  horizontally
              -1.0, // Move to bottom 5 Vertically
            ),
          )
        ],
      ),
      child: Row(children: [
        Container(
          decoration: BoxDecoration(
              border: Border.all(color: ColorBase.black40, width: 1),
              borderRadius: BorderRadius.circular(8)),
          height: 38,
          width: 100,
          child: Skeleton(width: 100, height: 38),
        ),
        SizedBox(width: 56),
        Expanded(
          child: Skeleton(height: 38),
        ),
      ]),
    );
  }

  Widget _eventParticipantAvatarItem(
      BuildContext context, VenueEventDataNew eventData, int index) {
    final mediaQuery = MediaQuery.of(context);
    final screenWidth = mediaQuery.size.width;
    int totalBorder = ((screenWidth - 64) / 40).round();
    int maxPlayer = eventData.maximumPlayer;
    int maxPlayerShort = 5;
    return Container(
      child: Column(
        children: [
          GestureDetector(
            onTap: () {},
            child: Container(
              width: screenWidth,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Stack(
                    children: [
                      Row(
                        children: [
                          if (eventData.participantsAvatar != null)
                            for (int x = 0;
                                x <
                                    ((eventData.participantsAvatar.length >
                                            maxPlayerShort - 1)
                                        ? maxPlayerShort == maxPlayer
                                            ? maxPlayerShort
                                            : maxPlayerShort - 1
                                        : eventData.participantsAvatar.length);
                                x++)
                              Row(
                                children: [
                                  ClipOval(
                                    child: (eventData.participantsAvatar[x] !=
                                                '' &&
                                            eventData.participantsAvatar[x] !=
                                                null)
                                        ? (x + 1 >= maxPlayerShort &&
                                                (maxPlayer - maxPlayerShort >
                                                    0))
                                            ? ClipOval(
                                                child: SvgPicture.asset(
                                                'assets/images/ver3/svg/border_empty_avatar.svg',
                                                height: 32,
                                                width: 32,
                                              ))
                                            : Image(
                                                image: NetworkImage(
                                                  BaseUrlConfig.baseAssetUrl +
                                                      eventData
                                                          .participantsAvatar[x],
                                                ),
                                                height: 32,
                                                width: 32,
                                                errorBuilder:
                                                    (BuildContext context,
                                                        Object exception,
                                                        StackTrace stackTrace) {
                                                  return Image.asset(
                                                    'assets/images/ver3/default_user.png',
                                                    height: 32,
                                                    width: 32,
                                                  );
                                                },
                                              )
                                        : Image.asset(
                                            'assets/images/ver3/default_user.png',
                                            height: 32,
                                            width: 32,
                                          ),
                                  ),
                                  // if (x < 6)
                                  SizedBox(
                                    width: 8,
                                  )
                                ],
                              ),
                          // if(maxPlayerShort==maxPlayer)
                          for (int x = 0;
                              x <
                                  ((eventData.participantsAvatar != null)
                                      ? (maxPlayerShort < maxPlayer &&
                                              maxPlayerShort -
                                                      eventData
                                                          .participantsAvatar
                                                          .length <
                                                  1)
                                          ? 1
                                          : maxPlayerShort -
                                              eventData
                                                  .participantsAvatar.length
                                      : maxPlayerShort);
                              x++)
                            Row(
                              children: [
                                ClipOval(
                                    child: SvgPicture.asset(
                                  'assets/images/ver3/svg/border_empty_avatar.svg',
                                  height: 32,
                                  width: 32,
                                )),
                                // if (x < (((eventData.participantsAvatar != null)
                                //       ? maxPlayerShort -
                                //           eventData.participantsAvatar.length
                                //       : maxPlayerShort)-1))
                                SizedBox(
                                  width: 8,
                                )
                              ],
                            ),
                        ],
                      ),
                      if (maxPlayer - maxPlayerShort > 0)
                        Positioned(
                          left: ((32 * (maxPlayerShort - 1)) +
                                  (8 * (maxPlayerShort - 1)))
                              .toDouble(),
                          child: Container(
                            width: 32,
                            height: 32,
                            alignment: Alignment.center,
                            // constraints:
                            //     BoxConstraints(maxWidth: screenWidth - 110),
                            child: Text(
                              maxPlayer - maxPlayerShort + 1 > 99
                                  ? '+99'
                                  : '+${(maxPlayer - maxPlayerShort) + 1}',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: ColorBase.black60,
                                  // height: 1.4,
                                  fontFamily: 'Rubik',
                                  fontSize: ScreenUtil().scaleText * 12,
                                  fontWeight: FontWeight.w500),
                              // overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        )
                    ],
                  ),
                  Text('·',
                      style: TextStyle(
                        color: ColorBase.black60,
                        fontSize: ScreenUtil().scaleText * 18,
                      )),
                  SizedBox(width: 4),
                  Text(
                    ' ${eventData.noOfParticipants}/${eventData.maximumPlayer}',
                    style: TextStyle(
                        color: ColorBase.black80,
                        fontFamily: 'Rubik',
                        fontSize: ScreenUtil().scaleText * 12,
                        fontWeight: FontWeight.w500),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// Category Title
  Widget _buildCategoryTitle(String title, int index) {
    return Padding(
      key: jewelleryCategories[index],
      padding: const EdgeInsets.only(top: 14, right: 12, left: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 19,
                  fontWeight: FontWeight.w900,
                ),
              ),
              TextButton(
                onPressed: () {},
                child: const Text(
                  'View more',
                  style: TextStyle(
                      fontSize: 13,
                      fontWeight: FontWeight.w300,
                      color: Colors.indigo),
                ),
              ),
            ],
          ),
          const Divider(),
        ],
      ),
    );
  }

  Widget _buildFacilitiesWidget(
      {List<AditionalInformation> facilities,
      List<AditionalInformation> descPoints,
      bool isLoading = false}) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              isLoading
                  ? Container(
                      child: Column(
                        children: [
                          Container(
                            margin: EdgeInsets.only(top: 12),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Expanded(
                                  child: Row(
                                    children: [
                                      Skeleton(
                                        width: 50,
                                        height: 24,
                                      ),
                                    ],
                                  ),
                                ),
                                Expanded(
                                  child: Row(
                                    children: [
                                      Skeleton(
                                        width: 50,
                                        height: 24,
                                      ),
                                    ],
                                  ),
                                ),
                                Expanded(
                                  child: Row(
                                    children: [
                                      Skeleton(
                                        width: 50,
                                        height: 24,
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    )
                  : Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 20),
                          Container(
                            child: Text(
                              context.formatString(AppLocale.fasilitas, []),
                              style: TextStyle(
                                color: ColorBase.black100,
                                fontFamily: 'Rubik',
                                fontSize: ScreenUtil().scaleText * 16,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                          SizedBox(height: 12),
                          for (var i = 0;
                              i <
                                  (facilities.length > 10
                                      ? 10
                                      : facilities.length);
                              i += 2)
                            Container(
                              margin: EdgeInsets.only(top: (i == 0 ? 0 : 12)),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: [
                                  Container(
                                    width: (screenWidth - 48) / 2 - 12,
                                    child: Row(
                                      children: [
                                        CachedNetworkImage(
                                          imageUrl: BaseUrlConfig.baseAssetUrl +
                                              facilities[i].image,
                                          width: 20,
                                          height: 20,
                                          fit: BoxFit.scaleDown,
                                          progressIndicatorBuilder: (context,
                                                  url, downloadProgress) =>
                                              CircularProgressIndicator(
                                                  value: downloadProgress
                                                      .progress),
                                          errorWidget: (context, url, error) =>
                                              Image.asset(
                                            'assets/icons/image-broken.png',
                                            height: 20,
                                            width: 20,
                                          ),
                                        ),
                                        SizedBox(width: 8),
                                        Container(
                                          width: (screenWidth - 48) / 2 - 44,
                                          child: Text(
                                            facilities[i].title,
                                            style: TextStyle(
                                              color: ColorBase.black100,
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                            ),
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Container(
                                    width: (screenWidth - 48) / 2 - 12,
                                    child: (i + 1 < facilities.length)
                                        ? Row(
                                            children: [
                                              CachedNetworkImage(
                                                imageUrl:
                                                    BaseUrlConfig.baseAssetUrl +
                                                        facilities[i + 1].image,
                                                width: 20,
                                                height: 20,
                                                fit: BoxFit.scaleDown,
                                                progressIndicatorBuilder:
                                                    (context, url,
                                                            downloadProgress) =>
                                                        CircularProgressIndicator(
                                                            value:
                                                                downloadProgress
                                                                    .progress),
                                                errorWidget:
                                                    (context, url, error) =>
                                                        Image.asset(
                                                  'assets/icons/image-broken.png',
                                                  height: 20,
                                                  width: 20,
                                                ),
                                              ),
                                              SizedBox(width: 8),
                                              Container(
                                                width:
                                                    (screenWidth - 48) / 2 - 44,
                                                child: Text(
                                                  facilities[i + 1].title,
                                                  style: TextStyle(
                                                    color: ColorBase.black100,
                                                    fontFamily: 'Rubik',
                                                    fontSize:
                                                        ScreenUtil().scaleText *
                                                            14,
                                                  ),
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                ),
                                              ),
                                            ],
                                          )
                                        : SizedBox(width: 0),
                                  ),
                                ],
                              ),
                            ),
                          if (facilities.length > 10)
                            GestureDetector(
                              onTap: () {
                                _summaryModal(context, screenWidth, facilities);
                              },
                              child: Container(
                                height: 40,
                                margin: EdgeInsets.only(top: 20),
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(12),
                                  border: Border.all(
                                      color: ColorBase.black10, width: 1),
                                ),
                                child: Center(
                                  child: Text(
                                    context.formatString(
                                        AppLocale.lihat_semua_fasilitas,
                                        [facilities.length]),
                                    style: TextStyle(
                                      color: ColorBase.black100,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 14,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          if (descPoints.length > 0)
                            Padding(
                              padding: EdgeInsets.symmetric(vertical: 12),
                              child: Divider(color: ColorBase.black10),
                            ),
                          if (descPoints.length > 0)
                            Text(
                              context.formatString(AppLocale.deskripsi, []),
                              style: TextStyle(
                                color: ColorBase.black100,
                                fontFamily: 'Rubik',
                                fontSize: ScreenUtil().scaleText * 14,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          if (descPoints.length > 0) SizedBox(height: 8),
                          if (descPoints.length > 0)
                            Text(
                              _getVenueDescriptions(descPoints),
                              style: TextStyle(
                                color: ColorBase.black80,
                                fontFamily: 'Rubik',
                                fontSize: ScreenUtil().scaleText * 14,
                              ),
                            ),
                        ],
                      ),
                    ),
            ],
          ),
        ),
      ],
    );
  }

  VoidCallback updateSport(List<String> newSelectedSport, bool isMyPref,
      bool isAllSport, List<int> newSelectedSportId, BuildContext context) {
    setState(() {
      myPref = isMyPref;
      allSport = isAllSport;
      sportCategoryName = newSelectedSport;
      //   sports.clear();
      sports = newSelectedSportId;

      if (activeTab == 'komunitas') {
        communitiesBloc = BlocProvider.of<VenueDetailBloc>(context)
          ..add(FetchCommunities(
            widget.venueId,
            0,
            10,
            sportCategoryName,
            sortCommunity,
            widget.context,
          ));
      }

      if (activeTab == 'coach') {
        coachVenuesBloc = BlocProvider.of<VenueDetailBloc>(context)
          ..add(FetchCoachVenues(
            widget.venueId,
            0,
            10,
            sports,
            widget.context,
          ));
      }

      countTotalFilter();
    });

    return null;
  }

  void actionFilterMembership() {
    if (activeTab == 'membership') {
      membershipVenuesBloc = BlocProvider.of<VenueDetailBloc>(context)
        ..add(FetchMembershipVenues(
            widget.context, widget.venueId, 0, 10, membershipTypes));
    }
  }

  void countTotalFilter() {
    setState(() {
      totalFilter = 0;
      newSportFilter = 0;
      newSportFilter += sportCategoryName.length;
    });
  }

  Widget _emptyState() {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;

    return Container(
      width: screenWidth,
      height: screenHeight,
      child: Column(children: [
        SizedBox(height: MediaQuery.of(context).size.height * 0.1),
        Image(
          image: AssetImage('assets/images/ver3/empty_search.png'),
          height: ScreenUtil().scaleText * 72,
          fit: BoxFit.fitHeight,
        ),
        SizedBox(
          height: 16,
        ),
        Text(
          context.formatString(AppLocale.dataTidakDitemukan, []),
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: ScreenUtil().scaleText * 16,
            fontFamily: 'Rubik',
            color: ColorBase.black100,
          ),
        ),
      ]),
    );
  }

  void _facilitiesBottomSheet(context, List<AditionalInformation> facilities) {
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;
    double screenWidth = MediaQuery.of(context).size.width;

    showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
      ),
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return StatefulBuilder(
            builder: (BuildContext ctx, StateSetter modalSetState) {
          return Container(
            padding: EdgeInsets.fromLTRB(24, 8, 24, 24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                InkWell(
                  onTap: () {},
                  child: Center(
                    child: Container(
                      width: 40,
                      height: 4.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6),
                        color: Colors.black26,
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 24),
                Text(
                  context.formatString(AppLocale.fasilitas, []),
                  style: TextFontConst.RUBIK_MEDIUM_18,
                ),
                SizedBox(height: 24),
                Container(
                  constraints: BoxConstraints(maxHeight: screenHeight * 0.8),
                  child: SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        for (var i = 0; i < facilities.length; i += 2)
                          Container(
                            margin: EdgeInsets.only(top: (i == 0 ? 0 : 12)),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Container(
                                  width: (screenWidth - 48) / 2 - 12,
                                  child: Row(
                                    children: [
                                      CachedNetworkImage(
                                        imageUrl: BaseUrlConfig.baseAssetUrl +
                                            facilities[i].image,
                                        width: 24,
                                        height: 24,
                                        fit: BoxFit.scaleDown,
                                        progressIndicatorBuilder: (context, url,
                                                downloadProgress) =>
                                            CircularProgressIndicator(
                                                value:
                                                    downloadProgress.progress),
                                        errorWidget: (context, url, error) =>
                                            Image.asset(
                                          'assets/icons/image-broken.png',
                                          height: 24,
                                          width: 24,
                                        ),
                                      ),
                                      SizedBox(width: 8),
                                      Container(
                                        width: (screenWidth - 48) / 2 - 44,
                                        child: Text(
                                          facilities[i].title,
                                          style: TextStyle(
                                            color: ColorBase.black80,
                                            fontFamily: 'Rubik',
                                            fontSize:
                                                ScreenUtil().scaleText * 14,
                                          ),
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  width: (screenWidth - 48) / 2 - 12,
                                  child: (i + 1 < facilities.length)
                                      ? Row(
                                          children: [
                                            CachedNetworkImage(
                                              imageUrl:
                                                  BaseUrlConfig.baseAssetUrl +
                                                      facilities[i + 1].image,
                                              width: 24,
                                              height: 24,
                                              fit: BoxFit.scaleDown,
                                              progressIndicatorBuilder:
                                                  (context, url,
                                                          downloadProgress) =>
                                                      CircularProgressIndicator(
                                                          value:
                                                              downloadProgress
                                                                  .progress),
                                              errorWidget:
                                                  (context, url, error) =>
                                                      Image.asset(
                                                'assets/icons/image-broken.png',
                                                height: 24,
                                                width: 24,
                                              ),
                                            ),
                                            SizedBox(width: 8),
                                            Container(
                                              width:
                                                  (screenWidth - 48) / 2 - 44,
                                              child: Text(
                                                facilities[i + 1].title,
                                                style: TextStyle(
                                                  color: ColorBase.black80,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          14,
                                                ),
                                                overflow: TextOverflow.ellipsis,
                                              ),
                                            ),
                                          ],
                                        )
                                      : SizedBox(width: 0),
                                ),
                              ],
                            ),
                          ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          );
        });
      },
    );
  }

  void _sportsBottomSheet(context) {
    double screenHeight = MediaQuery.of(context).size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;
    double screenWidth = MediaQuery.of(context).size.width;

    showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
      ),
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return StatefulBuilder(
            builder: (BuildContext ctx, StateSetter modalSetState) {
          return Container(
            padding: EdgeInsets.fromLTRB(24, 8, 24, 24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                InkWell(
                  onTap: () {},
                  child: Center(
                    child: Container(
                      width: 40,
                      height: 4.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6),
                        color: Colors.black26,
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 24),
                Text(
                  context.formatString(
                    AppLocale.pilihCabangOlahraga,
                    [],
                  ),
                  style: TextFontConst.RUBIK_MEDIUM_18,
                ),
                SizedBox(height: 24),
                Container(
                  constraints: BoxConstraints(maxHeight: screenHeight * 0.8),
                  child: SingleChildScrollView(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          constraints:
                              BoxConstraints(maxHeight: screenHeight * 3 / 4),
                          width: screenWidth,
                          child: SingleChildScrollView(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    GestureDetector(
                                      onTap: () {
                                        modalSetState(
                                          () {},
                                        );
                                      },
                                      child: Container(
                                        width: screenWidth,
                                        color: Colors.transparent,
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Row(
                                              children: [
                                                Container(
                                                  height: 24,
                                                  width: 24,
                                                  child: CachedNetworkImage(
                                                    imageUrl: BaseUrlConfig
                                                            .baseAssetUrl +
                                                        'assets/img/football.png',
                                                    fit: BoxFit.contain,
                                                    progressIndicatorBuilder:
                                                        (context, url,
                                                                downloadProgress) =>
                                                            Skeleton(),
                                                    errorWidget:
                                                        (context, url, error) =>
                                                            Image.asset(
                                                      'assets/icons/image-broken.png',
                                                      height: 16,
                                                      width: 16,
                                                      fit: BoxFit.contain,
                                                    ),
                                                  ),
                                                ),
                                                SizedBox(
                                                  width: 8,
                                                ),
                                                Text(
                                                  "Sepak Bola",
                                                  style: TextStyle(
                                                    color: ColorBase.black100,
                                                    fontFamily: 'Rubik',
                                                    height: 1.4,
                                                    fontSize:
                                                        ScreenUtil().scaleText *
                                                            16,
                                                  ),
                                                ),
                                              ],
                                            ),
                                            Container(
                                                height: 20,
                                                width: 20,
                                                child: Image.asset(
                                                  'assets/images/radio-black.png',
                                                  fit: BoxFit.contain,
                                                )),
                                          ],
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding:
                                          EdgeInsets.symmetric(vertical: 14),
                                      child: Divider(color: ColorBase.black10),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(height: 28),
                Divider(
                  color: ColorBase.black10,
                ),
                Padding(
                  padding: const EdgeInsets.all(0.0),
                  child: Container(
                    width: screenWidth - 16 * 2,
                    height: 44,
                    decoration: BoxDecoration(
                      border: Border.all(color: ColorBase.primaryRed),
                      color: ColorBase.primaryRed,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: TextButton(
                      onPressed: () async {
                        _sharedPreferencesManager.putBool(
                            'is_new_select_schedule', true);
                        Navigator.of(context).pushNamed(
                            NewChooseScheduleScreen.routeName,
                            arguments: {
                              'venue_id': widget.venueId,
                              'field_id': 222,
                              'integration_type': widget.integrationType,
                            });
                      },
                      child: Text(
                        context.formatString(
                          AppLocale.terapkan,
                          [],
                        ),
                        style: TextStyle(
                          color: ColorBase.primaryWhite,
                          fontWeight: FontWeight.w500,
                          height: 1.4,
                          fontSize: ScreenUtil().scaleText * 14,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        });
      },
    );
  }

  Widget _buildTimeWidget(
      {List<OperationTime> operationTimes, bool isLoading = false}) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Container(
      padding: EdgeInsets.symmetric(vertical: 14, horizontal: 18),
      margin: EdgeInsets.only(left: 16, right: 16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.07),
            offset: Offset(0.0, 3.0),
            blurRadius: 7.0,
          ),
        ],
      ),
      child: isLoading
          ? Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Skeleton(width: 14, height: 14, marginRight: 10),
                    Skeleton(width: 50, height: 16, marginRight: 10),
                    Spacer(),
                    Skeleton(width: 75, height: 16, marginRight: 10),
                  ],
                ),
              ],
            )
          : Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                      _venueTimeExpand = !_venueTimeExpand;
                    });
                  },
                  child: (!_venueTimeExpand && currentDayOperationTime != null)
                      ? Container(
                          color: Colors.transparent,
                          child: Row(
                            crossAxisAlignment:
                                (currentDayOperationTime.specialDay != '')
                                    ? CrossAxisAlignment.start
                                    : CrossAxisAlignment.center,
                            children: [
                              SvgPicture.asset('assets/icons/clock.svg'),
                              SizedBox(width: 10),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  if (currentDayOperationTime.specialDay != '')
                                    SizedBox(height: 4),
                                  Text(
                                    currentDayOperationTime.day,
                                    style: TextStyle(
                                      color: ColorBase.black100,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 14,
                                    ),
                                  ),
                                  if (currentDayOperationTime.specialDay != '')
                                    SizedBox(height: 4),
                                  if (currentDayOperationTime.specialDay != '')
                                    Container(
                                      width: (screenWidth - 32) / 2 - 8 - 30,
                                      child: Text(
                                        currentDayOperationTime.specialDay,
                                        style: TextStyle(
                                          color: ColorBase.secondaryRed,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 12,
                                        ),
                                        overflow: TextOverflow.ellipsis,
                                        maxLines: 2,
                                      ),
                                    ),
                                ],
                              ),
                              Spacer(),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  if (currentDayOperationTime.specialDay != '')
                                    SizedBox(height: 4),
                                  Text(
                                    (currentDayOperationTime.status ==
                                                'active' &&
                                            currentDayOperationTime.startTime !=
                                                null &&
                                            currentDayOperationTime.endTime !=
                                                null)
                                        ? '${currentDayOperationTime.startTime.substring(0, 5)} - ${currentDayOperationTime.endTime.substring(0, 5)}'
                                        : context
                                            .formatString(AppLocale.tutup, []),
                                    style: TextStyle(
                                      color: ColorBase.black100,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 14,
                                    ),
                                  ),
                                  // if (currentDayOperationTime.specialDay != '')
                                  //   SizedBox(height: 4),
                                  // if (currentDayOperationTime.specialDay != '')
                                  //   Container(
                                  //     width:
                                  //         (screenWidth - 32) / 2 - 8 - 44 - 12,
                                  //     child: Text(
                                  //       'Jam operasional mungkin berbeda',
                                  //       style: TextStyle(
                                  //         color: ColorBase.secondaryRed,
                                  //         fontFamily: 'Rubik',
                                  //         fontSize: ScreenUtil().scaleText*  12,
                                  //       ),
                                  //       overflow: TextOverflow.ellipsis,
                                  //       maxLines: 2,
                                  //       textAlign: TextAlign.right,
                                  //     ),
                                  //   ),
                                ],
                              ),
                              SizedBox(width: 12),
                              Icon(
                                Icons.keyboard_arrow_down_rounded,
                                color: ColorBase.primaryRed,
                              ),
                            ],
                          ),
                        )
                      : Container(
                          color: Colors.transparent,
                          child: Row(
                            crossAxisAlignment:
                                (operationTimes[0].specialDay != '')
                                    ? CrossAxisAlignment.start
                                    : CrossAxisAlignment.center,
                            children: [
                              SvgPicture.asset('assets/icons/clock.svg'),
                              SizedBox(width: 10),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  if (operationTimes[0].specialDay != '')
                                    SizedBox(height: 4),
                                  Text(
                                    operationTimes[0].day,
                                    style: TextStyle(
                                      color: ColorBase.black100,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 14,
                                    ),
                                  ),
                                  if (operationTimes[0].specialDay != '')
                                    SizedBox(height: 4),
                                  if (operationTimes[0].specialDay != '')
                                    Container(
                                      width: (screenWidth - 32) / 2 - 8 - 30,
                                      child: Text(
                                        operationTimes[0].specialDay,
                                        style: TextStyle(
                                          color: ColorBase.secondaryRed,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 12,
                                        ),
                                        overflow: TextOverflow.ellipsis,
                                        maxLines: 2,
                                      ),
                                    ),
                                ],
                              ),
                              Spacer(),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  if (operationTimes[0].specialDay != '')
                                    SizedBox(height: 4),
                                  Text(
                                    (operationTimes[0].status == 'active' &&
                                            operationTimes[0].startTime !=
                                                null &&
                                            operationTimes[0].endTime != null)
                                        ? '${operationTimes[0].startTime.substring(0, 5)} - ${operationTimes[0].endTime.substring(0, 5)}'
                                        : context
                                            .formatString(AppLocale.tutup, []),
                                    style: TextStyle(
                                      color: ColorBase.black100,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 14,
                                    ),
                                  ),
                                  // if (operationTimes[0].specialDay != '')
                                  //   SizedBox(height: 4),
                                  // if (operationTimes[0].specialDay != '')
                                  //   Container(
                                  //     width:
                                  //         (screenWidth - 32) / 2 - 8 - 44 - 12,
                                  //     child: Text(
                                  //       'Jam operasional mungkin berbeda',
                                  //       style: TextStyle(
                                  //         color: ColorBase.secondaryRed,
                                  //         fontFamily: 'Rubik',
                                  //         fontSize: ScreenUtil().scaleText*  12,
                                  //       ),
                                  //       overflow: TextOverflow.ellipsis,
                                  //       maxLines: 2,
                                  //       textAlign: TextAlign.right,
                                  //     ),
                                  //   ),
                                ],
                              ),
                              SizedBox(width: 12),
                              Icon(
                                Icons.keyboard_arrow_down_rounded,
                                color: ColorBase.primaryRed,
                              ),
                            ],
                          ),
                        ),
                ),
                if (operationTimes.length > 1 && _venueTimeExpand)
                  Column(
                    children: [
                      SizedBox(height: 8),
                      for (var i = 1; i < operationTimes.length; i++)
                        if (operationTimes[i].day != null)
                          Container(
                            margin: EdgeInsets.only(
                                bottom: i < operationTimes.length - 1 ? 12 : 0),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(width: 30),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      operationTimes[i].day,
                                      style: TextStyle(
                                        color: ColorBase.black100,
                                        fontFamily: 'Rubik',
                                        fontSize: ScreenUtil().scaleText * 14,
                                      ),
                                    ),
                                    if (operationTimes[i].specialDay != '')
                                      SizedBox(height: 4),
                                    if (operationTimes[i].specialDay != '')
                                      Container(
                                        width: (screenWidth - 32) / 2 - 8 - 30,
                                        child: Text(
                                          operationTimes[i].specialDay,
                                          style: TextStyle(
                                            color: ColorBase.secondaryRed,
                                            fontFamily: 'Rubik',
                                            fontSize:
                                                ScreenUtil().scaleText * 12,
                                          ),
                                          overflow: TextOverflow.ellipsis,
                                          maxLines: 2,
                                        ),
                                      ),
                                  ],
                                ),
                                Spacer(),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    Text(
                                      (operationTimes[i].status == 'active' &&
                                              operationTimes[i].startTime !=
                                                  null &&
                                              operationTimes[i].endTime != null)
                                          ? '${operationTimes[i].startTime.substring(0, 5)} - ${operationTimes[i].endTime.substring(0, 5)}'
                                          : context.formatString(
                                              AppLocale.tutup, []),
                                      style: TextStyle(
                                        color: ColorBase.black100,
                                        fontFamily: 'Rubik',
                                        fontSize: ScreenUtil().scaleText * 14,
                                      ),
                                    ),
                                    // if (operationTimes[i].specialDay != '')
                                    //   SizedBox(height: 4),
                                    // if (operationTimes[i].specialDay != '')
                                    //   Container(
                                    //     width: (screenWidth - 32) / 2 -
                                    //         8 -
                                    //         44 -
                                    //         12,
                                    //     child: Text(
                                    //       'Jam operasional mungkin berbeda',
                                    //       style: TextStyle(
                                    //         color: ColorBase.secondaryRed,
                                    //         fontFamily: 'Rubik',
                                    //         fontSize: ScreenUtil().scaleText*  12,
                                    //       ),
                                    //       overflow: TextOverflow.ellipsis,
                                    //       maxLines: 2,
                                    //       textAlign: TextAlign.right,
                                    //     ),
                                    //   ),
                                  ],
                                ),
                                SizedBox(width: 32),
                              ],
                            ),
                          ),
                    ],
                  ),
              ],
            ),
    );
  }

  Widget _membership(BuildContext context, screenHeight, screenWidth) {
    double screenWidth = MediaQuery.of(context).size.width;
    int x = 0;
    int y = 0;
    for (var i = 0; i < memberships.length; i++) {
      if (memberships[i].type == package[0] && y < 2) {
        x = i;
        y++;
      }
    }

    return Container(
      width: screenWidth - 32,
      padding: EdgeInsets.symmetric(vertical: 14, horizontal: 18),
      margin: EdgeInsets.only(left: 16, right: 16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.07),
            offset: Offset(0.0, 3.0),
            blurRadius: 7.0,
          ),
        ],
      ),
      child: isLoading
          ? Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Skeleton(width: 120, height: 16),
                SizedBox(height: 12),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Skeleton(width: 90, height: 14),
                    Skeleton(width: 90, height: 14),
                  ],
                ),
              ],
            )
          : Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                      height: 16,
                      width: 16,
                      child: Image.asset(
                        'assets/images/ver2/arrow.png',
                        fit: BoxFit.contain,
                      ),
                    ),
                    SizedBox(
                      width: 8,
                    ),
                    Text(
                      context.formatString(AppLocale.paketMembership, []),
                      style: TextStyle(
                        color: ColorBase.black100,
                        fontFamily: 'Rubik',
                        fontSize: ScreenUtil().scaleText * 16,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 12),
                Row(
                  children: [
                    if (isLanggananPackageExist) ...[
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            package.clear();
                            package.add('langganan');
                          });
                        },
                        child: Container(
                          decoration: BoxDecoration(
                              border: Border.all(
                                  color: (package[0] == 'langganan')
                                      ? ColorBase.primaryRed
                                      : ColorBase.black10,
                                  style: BorderStyle.solid,
                                  width: 1),
                              borderRadius: BorderRadius.circular(4)),
                          padding:
                              EdgeInsets.symmetric(vertical: 7, horizontal: 8),
                          child: Row(
                            children: [
                              if (package[0] == 'langganan')
                                Row(
                                  children: [
                                    Container(
                                      height: 16,
                                      width: 16,
                                      child: Image.asset(
                                        'assets/images/ver2/status-indicator-red.png',
                                        fit: BoxFit.contain,
                                      ),
                                    ),
                                    SizedBox(
                                      width: 8,
                                    ),
                                  ],
                                ),
                              Text(
                                context.formatString(AppLocale.langganan, []),
                                style: TextStyle(
                                  color: (package[0] == 'langganan')
                                      ? ColorBase.primaryRed
                                      : ColorBase.black80,
                                  fontFamily: 'Rubik',
                                  fontSize: ScreenUtil().scaleText * 12,
                                  fontWeight: FontWeight.w400,
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 6,
                      ),
                    ],
                    if (isBundlingPackageExist) ...[
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            package.clear();
                            package.add('bundling');
                          });
                        },
                        child: Container(
                          decoration: BoxDecoration(
                              border: Border.all(
                                  color: (package[0] == 'bundling')
                                      ? ColorBase.primaryRed
                                      : ColorBase.black10,
                                  style: BorderStyle.solid,
                                  width: 1),
                              borderRadius: BorderRadius.circular(4)),
                          padding:
                              EdgeInsets.symmetric(vertical: 7, horizontal: 8),
                          child: Row(
                            children: [
                              if (package[0] == 'bundling')
                                Row(
                                  children: [
                                    Container(
                                      height: 16,
                                      width: 16,
                                      child: Image.asset(
                                        'assets/images/ver2/status-indicator-red.png',
                                        fit: BoxFit.contain,
                                      ),
                                    ),
                                    SizedBox(
                                      width: 8,
                                    ),
                                  ],
                                ),
                              Text(
                                'Bundling',
                                style: TextStyle(
                                  color: (package[0] == 'bundling')
                                      ? ColorBase.primaryRed
                                      : ColorBase.black80,
                                  fontFamily: 'Rubik',
                                  fontSize: ScreenUtil().scaleText * 12,
                                  fontWeight: FontWeight.w400,
                                ),
                              )
                            ],
                          ),
                        ),
                      )
                    ]
                  ],
                ),
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 12),
                  child: DottedLine(dashColor: ColorBase.black10),
                ),
                for (var i = 0; i < memberships.length; i++)
                  if (memberships[i].type == package[0] && i <= x)
                    Container(
                      margin: EdgeInsets.only(bottom: 12),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(
                              color: ColorBase.black10,
                              style: BorderStyle.solid,
                              width: 1)),
                      padding: EdgeInsets.only(
                          top: 12, left: 14, right: 14, bottom: 14),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            memberships[i].name,
                            style: TextStyle(
                                color: ColorBase.black100,
                                fontFamily: 'Rubik',
                                fontSize: ScreenUtil().scaleText * 14,
                                fontWeight: FontWeight.w500,
                                height: 1.4),
                          ),
                          Text(
                            memberships[i].type == 'langganan'
                                ? '· ' +
                                    context.formatString(AppLocale.langganan,
                                        [memberships[i].minSlot.toString()]) +
                                    ' ' +
                                    context.formatString(
                                        AppLocale.slot_per_minggu, [])
                                : '· ' +
                                    context.formatString(
                                        AppLocale.paket_pembelian,
                                        [memberships[i].minSlot.toString()]) +
                                    ' ' +
                                    context.formatString(
                                        AppLocale.jadwal_sekaligus, []),
                            style: TextStyle(
                                color: ColorBase.black100,
                                fontFamily: 'Rubik',
                                fontSize: ScreenUtil().scaleText * 12,
                                fontWeight: FontWeight.w400,
                                height: 1.4),
                          ),
                          Text(
                            memberships[i].type == 'langganan'
                                ? '· ' +
                                    context.formatString(
                                        AppLocale.perpanjang_setiap, []) +
                                    ' ' +
                                    (memberships[i].slotCycle / 30)
                                        .round()
                                        .toString() +
                                    ' ' +
                                    context.formatString(AppLocale.bulan, [])
                                : ' ',
                            style: TextStyle(
                                color: ColorBase.black100,
                                fontFamily: 'Rubik',
                                fontSize: ScreenUtil().scaleText * 12,
                                fontWeight: FontWeight.w400,
                                height: 1.4),
                          ),
                          SizedBox(height: 6),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              if (memberships[i].discountAmount > 0)
                                Container(
                                  height: 12,
                                  width: 12,
                                  child: Image.asset(
                                    'assets/images/ver2/fire.png',
                                    fit: BoxFit.contain,
                                  ),
                                ),
                              if (memberships[i].discountAmount > 0)
                                SizedBox(width: 2),
                              if (memberships[i].discountAmount > 0)
                                Text(
                                  memberships[i].discountType == 'percentage'
                                      ? context.formatString(
                                              AppLocale.diskon, []) +
                                          ' ' +
                                          memberships[i]
                                              .discountAmount
                                              .toString() +
                                          '%'
                                      : context.formatString(
                                              AppLocale.diskon, []) +
                                          ' Rp ' +
                                          Helpers.formatRupiah(memberships[i]
                                                  .discountAmount
                                                  .toString())
                                              .toString(),
                                  style: TextStyle(
                                      color: ColorBase.secondaryRed,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 11,
                                      fontWeight: FontWeight.w500,
                                      height: 1.4),
                                ),
                              SizedBox(width: 6),
                              GestureDetector(
                                onTap: () {
                                  LoadingDialogWidget.show(context);

                                  venueMembershipTncRepository
                                      .membershipTnc(
                                    context,
                                    venueId: widget.venueId,
                                    membershipId: memberships[i].id,
                                  )
                                      .then((val) {
                                    LoadingDialogWidget.hide(context);
                                    setState(() {
                                      _membershipTnCModal(
                                          context,
                                          screenWidth,
                                          screenHeight,
                                          memberships[x],
                                          memberships[i].id,
                                          memberships[i]
                                              .activeFields[0]
                                              .fieldId,
                                          memberships[i].type,
                                          memberships[i].name,
                                          val.data.tncs,
                                          val.data.packageName,
                                          memberships[i].slotRule);
                                    });
                                  });
                                },
                                child: Container(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 8, vertical: 4),
                                  decoration: BoxDecoration(
                                      color: ColorBase.primaryRed,
                                      borderRadius: BorderRadius.circular(4),
                                      border: Border.all(
                                          color: ColorBase.primaryRed,
                                          style: BorderStyle.solid,
                                          width: 1)),
                                  child: Text(
                                    context
                                        .formatString(AppLocale.beliPaket, []),
                                    style: TextStyle(
                                        color: ColorBase.primaryWhite,
                                        fontFamily: 'Rubik',
                                        fontSize: ScreenUtil().scaleText * 12,
                                        fontWeight: FontWeight.w500,
                                        height: 1.4),
                                  ),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                SizedBox(height: 4),
                GestureDetector(
                  onTap: () {
                    Navigator.of(context).pushNamed(
                        MembershipPackageScreen.routeName,
                        arguments: {
                          // 'venue_id': otherVenueList[i].id
                          'type': package[0],
                          'venue_id': widget.venueId,

                          'integration_type': widget.integrationType,
                        });
                  },
                  child: Container(
                    height: 40,
                    width: screenWidth - 64,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(
                          color: ColorBase.black10,
                          width: 1,
                          style: BorderStyle.solid),
                      color: Colors.white,
                    ),
                    child: Text(
                      context.formatString(AppLocale.lihat_semua_paket, []),
                      style: TextStyle(
                          color: ColorBase.black100,
                          fontFamily: 'Rubik',
                          fontSize: ScreenUtil().scaleText * 14,
                          fontWeight: FontWeight.w500,
                          height: 1.4),
                      textAlign: TextAlign.center,
                    ),
                  ),
                )
              ],
            ),
    );
  }

  Widget _buildGroupedTimeWidget({bool isLoading = false}) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Container(
      width: screenWidth - 32,
      padding: EdgeInsets.symmetric(vertical: 14, horizontal: 18),
      margin: EdgeInsets.only(left: 16, right: 16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.07),
            offset: Offset(0.0, 3.0),
            blurRadius: 7.0,
          ),
        ],
      ),
      child: isLoading
          ? Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Skeleton(width: 120, height: 16),
                SizedBox(height: 12),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Skeleton(width: 90, height: 14),
                    Skeleton(width: 90, height: 14),
                  ],
                ),
              ],
            )
          : Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  context.formatString(AppLocale.jam_operasional, []),
                  style: TextStyle(
                    color: ColorBase.black100,
                    fontFamily: 'Rubik',
                    fontSize: ScreenUtil().scaleText * 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                SizedBox(height: 12),
                for (var i = 0; i < groupedOperationTimes.length; i++)
                  Container(
                    padding: EdgeInsets.only(
                        bottom: i < groupedOperationTimes.length - 1 ? 6 : 0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          (groupedOperationTimes[i]['days'].length == 1)
                              ? groupedOperationTimes[i]['days'][0]
                              : (groupedOperationTimes[i]['days'].length == 2)
                                  ? '${groupedOperationTimes[i]['days'][0]} & ${groupedOperationTimes[i]['days'][1]}'
                                  : '${groupedOperationTimes[i]['days'][0]} - ${groupedOperationTimes[i]['days'][groupedOperationTimes[i]['days'].length - 1]}',
                          style: TextStyle(
                            color: ColorBase.black80,
                            fontFamily: 'Rubik',
                            fontSize: ScreenUtil().scaleText * 14,
                          ),
                        ),
                        Text(
                          groupedOperationTimes[i]['hours'],
                          style: TextStyle(
                            color: ColorBase.black80,
                            fontFamily: 'Rubik',
                            fontSize: ScreenUtil().scaleText * 14,
                          ),
                        ),
                      ],
                    ),
                  ),
              ],
            ),
    );
  }

  void _summaryModal(
      context, double screenWidth, List<AditionalInformation> facilities) {
    MediaQueryData queryData = MediaQuery.of(context);
    double screenHeight = queryData.size.height -
        AppBar().preferredSize.height -
        MediaQuery.of(context).padding.top;
    final modalHeight = queryData.size.height -
        AppBar().preferredSize.height -
        queryData.padding.top;

    showModalBottomSheet(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
        ),
        context: context,
        isScrollControlled: true,
        builder: (context) {
          return StatefulBuilder(
            builder: (BuildContext ctx, StateSetter modalSetState) {
              return Container(
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      InkWell(
                        onTap: () {},
                        child: Center(
                          child: Container(
                            margin: EdgeInsets.only(top: 8, bottom: 16),
                            width: 40,
                            height: 4.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6),
                              color: Colors.black26,
                            ),
                          ),
                        ),
                      ),
                      Container(
                        constraints:
                            BoxConstraints(maxHeight: modalHeight - 100),
                        child: SingleChildScrollView(
                          child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(
                                      left: 24,
                                      right: 24,
                                      bottom: MediaQuery.of(context)
                                          .padding
                                          .bottom),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        context.formatString(
                                          AppLocale.fasilitas,
                                          [],
                                        ),
                                        style: TextStyle(
                                          color: ColorBase.black100,
                                          fontFamily: 'Rubik',
                                          fontSize: ScreenUtil().scaleText * 16,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      Container(
                                        width: screenWidth - 32,
                                        child: Padding(
                                          padding: EdgeInsets.symmetric(
                                              vertical: 12),
                                          child: DottedLine(
                                              dashColor: ColorBase.black10),
                                        ),
                                      ),
                                      Container(
                                        constraints: BoxConstraints(
                                            maxHeight: screenHeight * 0.8),
                                        child: SingleChildScrollView(
                                          child: Column(
                                            mainAxisSize: MainAxisSize.min,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              for (var i = 0;
                                                  i < facilities.length;
                                                  i += 2)
                                                Container(
                                                  margin: EdgeInsets.only(
                                                      top: (i == 0 ? 0 : 12)),
                                                  child: Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment.start,
                                                    children: [
                                                      Container(
                                                        width:
                                                            (screenWidth - 48) /
                                                                    2 -
                                                                12,
                                                        child: Row(
                                                          children: [
                                                            CachedNetworkImage(
                                                              imageUrl: BaseUrlConfig
                                                                      .baseAssetUrl +
                                                                  facilities[i]
                                                                      .image,
                                                              width: 20,
                                                              height: 20,
                                                              fit: BoxFit
                                                                  .scaleDown,
                                                              progressIndicatorBuilder: (context,
                                                                      url,
                                                                      downloadProgress) =>
                                                                  CircularProgressIndicator(
                                                                      value: downloadProgress
                                                                          .progress),
                                                              errorWidget: (context,
                                                                      url,
                                                                      error) =>
                                                                  Image.asset(
                                                                'assets/icons/image-broken.png',
                                                                height: 20,
                                                                width: 20,
                                                              ),
                                                            ),
                                                            SizedBox(width: 8),
                                                            Container(
                                                              width: (screenWidth -
                                                                          48) /
                                                                      2 -
                                                                  44,
                                                              child: Text(
                                                                facilities[i]
                                                                    .title,
                                                                style:
                                                                    TextStyle(
                                                                  color: ColorBase
                                                                      .black100,
                                                                  fontFamily:
                                                                      'Rubik',
                                                                  fontSize:
                                                                      ScreenUtil()
                                                                              .scaleText *
                                                                          12,
                                                                ),
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                              ),
                                                            ),
                                                          ],
                                                        ),
                                                      ),
                                                      Container(
                                                        width:
                                                            (screenWidth - 48) /
                                                                    2 -
                                                                12,
                                                        child:
                                                            (i + 1 <
                                                                    facilities
                                                                        .length)
                                                                ? Row(
                                                                    children: [
                                                                      CachedNetworkImage(
                                                                        imageUrl:
                                                                            BaseUrlConfig.baseAssetUrl +
                                                                                facilities[i + 1].image,
                                                                        width:
                                                                            20,
                                                                        height:
                                                                            20,
                                                                        fit: BoxFit
                                                                            .scaleDown,
                                                                        progressIndicatorBuilder: (context,
                                                                                url,
                                                                                downloadProgress) =>
                                                                            CircularProgressIndicator(value: downloadProgress.progress),
                                                                        errorWidget: (context,
                                                                                url,
                                                                                error) =>
                                                                            Image.asset(
                                                                          'assets/icons/image-broken.png',
                                                                          height:
                                                                              20,
                                                                          width:
                                                                              20,
                                                                        ),
                                                                      ),
                                                                      SizedBox(
                                                                          width:
                                                                              8),
                                                                      Container(
                                                                        width: (screenWidth - 48) /
                                                                                2 -
                                                                            44,
                                                                        child:
                                                                            Text(
                                                                          facilities[i + 1]
                                                                              .title,
                                                                          style:
                                                                              TextStyle(
                                                                            color:
                                                                                ColorBase.black100,
                                                                            fontFamily:
                                                                                'Rubik',
                                                                            fontSize:
                                                                                ScreenUtil().scaleText * 12,
                                                                          ),
                                                                          overflow:
                                                                              TextOverflow.ellipsis,
                                                                        ),
                                                                      ),
                                                                    ],
                                                                  )
                                                                : SizedBox(
                                                                    width: 0),
                                                      ),
                                                    ],
                                                  ),
                                                ),
                                            ],
                                          ),
                                        ),
                                      ),
                                      SizedBox(height: 16),
                                    ],
                                  ),
                                ),
                              ]),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        });
  }

  void filterActivityModal(context, double modalHeight) {
    showModalBottomSheet(
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
      ),
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return StatefulBuilder(
          builder: (BuildContext ctx, StateSetter modalSetState) {
            return Container(
              constraints: BoxConstraints(
                maxHeight:
                    MediaQuery.of(context).size.height * 0.8, // 80% max height
              ),
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  InkWell(
                    onTap: () {},
                    child: Center(
                      child: Container(
                        margin: EdgeInsets.only(top: 8, bottom: 16),
                        width: 40,
                        height: 4.0,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: Colors.black26,
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding:
                        EdgeInsets.symmetric(horizontal: horizontalPadding),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              context.formatString(
                                AppLocale.filter,
                                [],
                              ),
                              style: TextStyle(
                                fontFamily: 'Rubik',
                                fontSize: ScreenUtil().scaleText * 16,
                                fontWeight: FontWeight.w500,
                                color: ColorBase.black100,
                              ),
                            ),
                            GestureDetector(
                              onTap: () {
                                setState(() {
                                  categoryName = [];
                                  filterCoaching = false;
                                  filterBookedViaAyo = false;
                                  filterSuperhost = false;
                                  filterOfficialByVenue = false;
                                  selectedLevelList = [];
                                  timeFilterSelected = [];

                                  selectedTimeStart = '00:00';
                                  selectedTimeEnd = '23:00';
                                  integerSelectedTimeList =
                                      SfRangeValues(0, 23);
                                  finalTimeList = SfRangeValues(0, 23);
                                  filterStartTime = 0;
                                  filterEndTime = 23;

                                  selectedLevel = 'Semua Level';
                                  integerSelectedLevelList =
                                      SfRangeValues(0, 4);
                                  finalLevelList = SfRangeValues(0, 4);
                                  startLevel = 0;
                                  endLevel = 4;
                                });

                                _loadActivity();

                                Navigator.pop(context, null);
                              },
                              child: Text(
                                context.formatString(
                                  AppLocale.reset,
                                  [],
                                ),
                                style: TextStyle(
                                  fontFamily: 'Rubik',
                                  fontSize: ScreenUtil().scaleText * 14,
                                  fontWeight: FontWeight.w500,
                                  color: (categoryName.length > 0 ||
                                          filterCoaching ||
                                          filterBookedViaAyo ||
                                          filterSuperhost ||
                                          filterOfficialByVenue ||
                                          selectedLevelList.length > 0 ||
                                          timeFilterSelected.length > 0)
                                      ? ColorBase.primaryRed
                                      : ColorBase.black60,
                                ),
                              ),
                            ),
                          ],
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(vertical: 16),
                          child: DottedLine(dashColor: ColorBase.black10),
                        ),
                        Container(
                          constraints: BoxConstraints(
                              maxHeight:
                                  MediaQuery.of(context).size.height * 0.6),
                          child: SingleChildScrollView(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  context.formatString(AppLocale.olahraga, []),
                                  style: TextStyle(
                                    fontFamily: 'Rubik',
                                    fontSize: ScreenUtil().scaleText * 14,
                                    fontWeight: FontWeight.w500,
                                    color: ColorBase.black100,
                                  ),
                                ),
                                SizedBox(height: 8),
                                Wrap(
                                  spacing: 0,
                                  children: [
                                    for (var x = 0;
                                        x < categoryActivityDatas.length;
                                        x++)
                                      GestureDetector(
                                        onTap: () {
                                          modalSetState(
                                            () {
                                              if (categoryName.contains(
                                                  categoryActivityDatas[x]
                                                      .name)) {
                                                categoryName.remove(
                                                    categoryActivityDatas[x]
                                                        .name);
                                              } else {
                                                categoryName.add(
                                                    categoryActivityDatas[x]
                                                        .name);
                                              }

                                              if (categoryId.contains(
                                                  categoryActivityDatas[x]
                                                      .id)) {
                                                categoryId.remove(
                                                    categoryActivityDatas[x]
                                                        .id);
                                              } else {
                                                categoryId.add(
                                                    categoryActivityDatas[x]
                                                        .id);
                                              }
                                            },
                                          );
                                        },
                                        child: Container(
                                          margin: EdgeInsets.only(
                                              right: 8, bottom: 8),
                                          padding: EdgeInsets.only(
                                              left: 12,
                                              right: 10,
                                              top: 6,
                                              bottom: 6),
                                          decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(8),
                                              color: categoryName.contains(
                                                      categoryActivityDatas[x]
                                                          .name)
                                                  ? ColorBase.black10
                                                  : ColorBase.primaryWhite,
                                              border: Border.all(
                                                  color: categoryName.contains(
                                                          categoryActivityDatas[
                                                                  x]
                                                              .name)
                                                      ? ColorBase.black10
                                                      : ColorBase.black40)),
                                          child: Row(
                                            mainAxisSize: MainAxisSize.min,
                                            children: [
                                              Container(
                                                width: 16,
                                                height: 16,
                                                child: SvgPicture.network(
                                                  '${BaseUrlConfig.baseAssetUrl}' +
                                                      categoryActivityDatas[x]
                                                          .svgPicture,
                                                  color: ColorBase.black100,
                                                  fit: BoxFit.contain,
                                                ),
                                              ),
                                              SizedBox(width: 4),
                                              Text(
                                                categoryActivityDatas[x].name,
                                                style: TextStyle(
                                                  fontFamily: 'Rubik',
                                                  fontWeight: FontWeight.w400,
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          14,
                                                  color: ColorBase.black100,
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                  ],
                                ),
                                SizedBox(height: 20),
                                Text(
                                  context
                                      .formatString(AppLocale.tagAktivitas, []),
                                  style: TextStyle(
                                    fontFamily: 'Rubik',
                                    fontSize: ScreenUtil().scaleText * 14,
                                    fontWeight: FontWeight.w500,
                                    color: ColorBase.black100,
                                  ),
                                ),
                                SizedBox(height: 8),
                                Wrap(spacing: 0, children: [
                                  GestureDetector(
                                    onTap: () {
                                      modalSetState(
                                        () {
                                          if (filterBookedViaAyo) {
                                            filterBookedViaAyo = false;
                                          } else {
                                            filterBookedViaAyo = true;
                                          }
                                        },
                                      );
                                    },
                                    child: Container(
                                      margin:
                                          EdgeInsets.only(right: 8, bottom: 8),
                                      padding: EdgeInsets.only(
                                          left: 12,
                                          right: 10,
                                          top: 6,
                                          bottom: 6),
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          color: filterBookedViaAyo
                                              ? ColorBase.black10
                                              : ColorBase.primaryWhite,
                                          border: Border.all(
                                              color: filterBookedViaAyo
                                                  ? ColorBase.black10
                                                  : ColorBase.black40)),
                                      child: Row(
                                        mainAxisSize: MainAxisSize.min,
                                        children: [
                                          Image.asset(
                                            'assets/images/ver3/ellipse-green.png',
                                            height: 16,
                                            width: 16,
                                          ),
                                          SizedBox(width: 4),
                                          Text(
                                            'Booked via AYO',
                                            style: TextStyle(
                                              fontFamily: 'Rubik',
                                              fontWeight: FontWeight.w400,
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                              color: ColorBase.black100,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: 6),
                                  GestureDetector(
                                    onTap: () {
                                      modalSetState(
                                        () {
                                          if (filterOfficialByVenue) {
                                            filterOfficialByVenue = false;
                                          } else {
                                            filterOfficialByVenue = true;
                                          }
                                        },
                                      );
                                    },
                                    child: Container(
                                      margin:
                                          EdgeInsets.only(right: 8, bottom: 8),
                                      padding: EdgeInsets.only(
                                          left: 12,
                                          right: 10,
                                          top: 6,
                                          bottom: 6),
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          color: filterOfficialByVenue
                                              ? ColorBase.black10
                                              : ColorBase.primaryWhite,
                                          border: Border.all(
                                              color: filterOfficialByVenue
                                                  ? ColorBase.black10
                                                  : ColorBase.black40)),
                                      child: Row(
                                        mainAxisSize: MainAxisSize.min,
                                        children: [
                                          Image.asset(
                                            'assets/images/ver3/ellipse-purple.png',
                                            height: 16,
                                            width: 16,
                                          ),
                                          SizedBox(width: 4),
                                          Text(
                                            'Official by Venue',
                                            style: TextStyle(
                                              fontFamily: 'Rubik',
                                              fontWeight: FontWeight.w400,
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                              color: ColorBase.black100,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: 6),
                                  GestureDetector(
                                    onTap: () {
                                      modalSetState(
                                        () {
                                          if (filterCoaching) {
                                            filterCoaching = false;
                                          } else {
                                            filterCoaching = true;
                                          }
                                        },
                                      );
                                    },
                                    child: Container(
                                      margin:
                                          EdgeInsets.only(right: 8, bottom: 8),
                                      padding: EdgeInsets.only(
                                          left: 12,
                                          right: 10,
                                          top: 6,
                                          bottom: 6),
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          color: filterCoaching
                                              ? ColorBase.black10
                                              : ColorBase.primaryWhite,
                                          border: Border.all(
                                              color: filterCoaching
                                                  ? ColorBase.black10
                                                  : ColorBase.black40)),
                                      child: Row(
                                        mainAxisSize: MainAxisSize.min,
                                        children: [
                                          Image.asset(
                                            'assets/images/ver3/whistle-transparent.png',
                                            height: 16,
                                            width: 16,
                                          ),
                                          SizedBox(width: 4),
                                          Text(
                                            'Coaching',
                                            style: TextStyle(
                                              fontFamily: 'Rubik',
                                              fontWeight: FontWeight.w400,
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                              color: ColorBase.black100,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: 6),
                                  GestureDetector(
                                    onTap: () {
                                      modalSetState(
                                        () {
                                          if (filterSuperhost) {
                                            filterSuperhost = false;
                                          } else {
                                            filterSuperhost = true;
                                          }
                                        },
                                      );
                                    },
                                    child: Container(
                                      margin:
                                          EdgeInsets.only(right: 8, bottom: 8),
                                      padding: EdgeInsets.only(
                                          left: 12,
                                          right: 10,
                                          top: 6,
                                          bottom: 6),
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          color: filterSuperhost
                                              ? ColorBase.black10
                                              : ColorBase.primaryWhite,
                                          border: Border.all(
                                              color: filterSuperhost
                                                  ? ColorBase.black10
                                                  : ColorBase.black40)),
                                      child: Row(
                                        mainAxisSize: MainAxisSize.min,
                                        children: [
                                          Image.asset(
                                            'assets/images/ver3/crown-red.png',
                                            height: 16,
                                            width: 16,
                                          ),
                                          SizedBox(width: 4),
                                          Text(
                                            'Superhost',
                                            style: TextStyle(
                                              fontFamily: 'Rubik',
                                              fontWeight: FontWeight.w400,
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                              color: ColorBase.black100,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ]),
                                SizedBox(height: 20),
                                Text(
                                  context
                                      .formatString(AppLocale.waktu_mulai, []),
                                  style: TextStyle(
                                    fontFamily: 'Rubik',
                                    fontSize: ScreenUtil().scaleText * 14,
                                    fontWeight: FontWeight.w500,
                                    color: ColorBase.black100,
                                  ),
                                ),
                                SizedBox(
                                  height: 8,
                                ),
                                Text(
                                  '$selectedTimeStart - $selectedTimeEnd',
                                  style: TextStyle(
                                    color: ColorBase.black100,
                                    fontFamily: 'Rubik',
                                    fontSize: ScreenUtil().scaleText * 14,
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                                SizedBox(
                                  height: 8,
                                ),
                                SfRangeSlider(
                                  min: 0,
                                  max: 23,
                                  values: integerSelectedTimeList,
                                  activeColor: ColorBase.black100,
                                  showTicks: false,
                                  showLabels: false,
                                  interval: 1,
                                  stepSize: 1,
                                  showDividers: true,
                                  enableTooltip: false,
                                  dragMode: SliderDragMode.both,
                                  onChanged: (value) {
                                    modalSetState(() {
                                      setState(
                                        () {
                                          finalTimeList = value;
                                          filterStartTime =
                                              (value.start).round();
                                          filterEndTime = (value.end).round();
                                          selectedTimeList.clear();
                                          timeFilterSelected.clear();
                                          integerSelectedTimeList =
                                              SfRangeValues(filterStartTime,
                                                  filterEndTime);

                                          for (var i = 0;
                                              i < filterTimeList.length;
                                              i++) {
                                            filterTimeList[i]['value'] = false;
                                            if (filterStartTime ==
                                                filterEndTime) {
                                              if (i == filterEndTime + 1) {
                                                filterTimeList[i]['value'] =
                                                    true;
                                              } else {
                                                filterTimeList[i]['value'] =
                                                    false;
                                              }
                                            } else {
                                              filterTimeList[i]['value'] =
                                                  false;
                                            }
                                          }

                                          for (var i = 0;
                                              i < timeList.length;
                                              i++) {
                                            if (i >= filterStartTime &&
                                                i <= filterEndTime) {
                                              selectedTimeList.add(timeList[i]);
                                            }
                                          }

                                          for (var i = 0;
                                              i < selectedTimeList.length;
                                              i++) {
                                            if (timeFilterSelected.contains(
                                                selectedTimeList[i])) {
                                              timeFilterSelected
                                                  .remove(selectedTimeList[i]);
                                            } else {
                                              timeFilterSelected
                                                  .add(selectedTimeList[i]);
                                            }

                                            selectedTimeStart =
                                                timeFilterSelected[0];
                                            selectedTimeEnd =
                                                timeFilterSelected[
                                                    timeFilterSelected.length -
                                                        1];
                                          }
                                        },
                                      );
                                    });
                                  },
                                  inactiveColor: ColorBase.black40,
                                  endThumbIcon: Container(
                                      width: 24,
                                      height: 24,
                                      child: Image.asset(
                                        'assets/images/ver3/slider-white.png',
                                        fit: BoxFit.cover,
                                      )),
                                  startThumbIcon: Container(
                                      width: 24,
                                      height: 24,
                                      child: Image.asset(
                                        'assets/images/ver3/slider-white.png',
                                        fit: BoxFit.cover,
                                      )),
                                  minorTicksPerInterval: 0,
                                ),
                                SizedBox(height: 20),
                                Text(
                                  context.formatString(
                                    AppLocale.skill_level,
                                    [],
                                  ),
                                  style: TextStyle(
                                    fontFamily: 'Rubik',
                                    fontSize: ScreenUtil().scaleText * 14,
                                    fontWeight: FontWeight.w500,
                                    color: ColorBase.black100,
                                  ),
                                ),
                                SizedBox(height: 8),
                                Text(
                                  '$selectedLevel',
                                  style: TextStyle(
                                    color: ColorBase.black100,
                                    fontFamily: 'Rubik',
                                    fontSize: ScreenUtil().scaleText * 14,
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                                SizedBox(
                                  height: 8,
                                ),
                                SfRangeSlider(
                                  min: 0,
                                  max: 4,
                                  values: integerSelectedLevelList,
                                  activeColor: ColorBase.black100,
                                  showTicks: false,
                                  showLabels: false,
                                  interval: 1,
                                  stepSize: 1,
                                  showDividers: true,
                                  enableTooltip: false,
                                  dragMode: SliderDragMode.both,
                                  onChanged: (value) {
                                    modalSetState(() {
                                      setState(
                                        () {
                                          finalLevelList = value;
                                          startLevel = (value.start).round();
                                          endLevel = (value.end).round();
                                          selectedLevelList.clear();
                                          integerSelectedLevelList =
                                              SfRangeValues(
                                                  startLevel, endLevel);
                                          for (var i = 0;
                                              i < filterLevelList.length;
                                              i++) {
                                            if (startLevel == 0 &&
                                                endLevel == 4) {
                                              filterLevelList[i]['value'] =
                                                  false;
                                              filterLevelList[0]['value'] =
                                                  true;
                                            } else {
                                              filterLevelList[i]['value'] =
                                                  false;
                                              if (startLevel == endLevel) {
                                                if (i == endLevel + 1) {
                                                  filterLevelList[i]['value'] =
                                                      true;
                                                } else {
                                                  filterLevelList[i]['value'] =
                                                      false;
                                                }
                                              } else {
                                                filterLevelList[i]['value'] =
                                                    false;
                                              }
                                            }
                                          }

                                          for (var i = 0;
                                              i < levelList.length;
                                              i++) {
                                            if (i >= startLevel &&
                                                i <= endLevel) {
                                              selectedLevelList
                                                  .add(levelList[i]);
                                            }
                                          }

                                          if (selectedLevelList.length == 5) {
                                            selectedLevel = 'Semua Level';
                                          } else {
                                            for (var i = 0;
                                                i < selectedLevelList.length;
                                                i++) {
                                              if (i == 0) {
                                                selectedLevel =
                                                    selectedLevelList[i];
                                              } else {
                                                if (selectedLevelList.length >
                                                        1 &&
                                                    i <
                                                        selectedLevelList
                                                            .length) {
                                                  if (i !=
                                                      selectedLevelList.length -
                                                          1) {
                                                    selectedLevel =
                                                        selectedLevel + ', ';
                                                  } else {
                                                    selectedLevel =
                                                        selectedLevel + ' & ';
                                                  }
                                                }
                                                selectedLevel = selectedLevel +
                                                    selectedLevelList[i];
                                              }
                                            }
                                          }
                                        },
                                      );
                                    });
                                  },
                                  inactiveColor: ColorBase.black40,
                                  endThumbIcon: Container(
                                      width: 24,
                                      height: 24,
                                      child: Image.asset(
                                        'assets/images/ver3/slider-white.png',
                                        fit: BoxFit.cover,
                                      )),
                                  startThumbIcon: Container(
                                      width: 24,
                                      height: 24,
                                      child: Image.asset(
                                        'assets/images/ver3/slider-white.png',
                                        fit: BoxFit.cover,
                                      )),
                                  minorTicksPerInterval: 0,
                                ),
                                SizedBox(height: 24),
                              ],
                            ),
                          ),
                        ),
                        Visibility(
                          visible: true,
                          child: Column(
                            children: [
                              SizedBox(height: 16),
                              Container(
                                width: double.infinity,
                                height: 38,
                                decoration: BoxDecoration(
                                  color: (categoryName.length > 0 ||
                                          filterCoaching ||
                                          filterBookedViaAyo ||
                                          filterSuperhost ||
                                          filterOfficialByVenue ||
                                          selectedLevelList.length > 0 ||
                                          timeFilterSelected.length > 0)
                                      ? ColorBase.primaryRed
                                      : ColorBase.black40,
                                  borderRadius: BorderRadius.circular(12),
                                ),
                                child: TextButton(
                                  onPressed: () {
                                    _loadActivity();
                                    Navigator.pop(context);
                                  },
                                  child: Center(
                                    child: Text(
                                      context.formatString(
                                        AppLocale.terapkan,
                                        [],
                                      ),
                                      style: TextStyle(
                                        fontFamily: 'Rubik',
                                        color: Colors.white,
                                        fontWeight: FontWeight.w500,
                                        fontSize: ScreenUtil().scaleText * 14,
                                      ),
                                      textAlign: TextAlign.center,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 24),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        );
      },
    ).whenComplete(() {
      countTotalFilter();

      if (!_isApplyFilterButtonClicked) {
        setState(() {
          _isApplyFilterButtonShown = (totalFilter > 0) ? true : false;
        });
        if (totalFilter == 0) {
          //   refreshData();
        } else {
          //   if (!_isOpenLocationModalClicked) {
          //     revertChipValueChanges('sports');
          //     revertChipValueChanges('locations');
          //     revertChipValueChanges('sparring_types');
          //     revertChipValueChanges('time_preferences');
          //     countTotalFilter();
          //   }
        }
      }
    });
  }

  void sortCommunityModal(context) {
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
        ),
        context: context,
        isScrollControlled: true,
        builder: (context) {
          return StatefulBuilder(
            builder: (BuildContext ctx, StateSetter modalSetState) {
              return Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    InkWell(
                      onTap: () {},
                      child: Center(
                        child: Container(
                          margin: EdgeInsets.only(top: 8, bottom: 16),
                          width: 40,
                          height: 4.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            color: Colors.black26,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 10),
                    Padding(
                      padding: EdgeInsets.only(
                          left: 24,
                          right: 24,
                          bottom: MediaQuery.of(context).padding.bottom),
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                context.formatString(AppLocale.urutkan, []),
                                style: TextStyle(
                                  fontFamily: 'Rubik',
                                  fontSize: ScreenUtil().scaleText * 16,
                                  fontWeight: FontWeight.w500,
                                  color: ColorBase.black100,
                                ),
                              ),
                              GestureDetector(
                                onTap: () {
                                  Navigator.pop(context);
                                },
                                child: Icon(
                                  Icons.close,
                                  color: ColorBase.black80,
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 36),
                          for (var i = 0; i < sortCommunityOptions.length; i++)
                            Column(
                              children: [
                                GestureDetector(
                                  onTap: () {
                                    modalSetState(() {
                                      _sortCommunityRadio =
                                          sortCommunityOptions[i]['value'];
                                      _isApplySortCommunityButtonShown =
                                          (_currentSortCommunityRadio ==
                                                  _sortCommunityRadio)
                                              ? false
                                              : true;
                                    });
                                  },
                                  child: Container(
                                    color: Colors.transparent,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          sortCommunityOptions[i]['name'],
                                          style: TextStyle(
                                            fontFamily: 'Rubik',
                                            fontSize:
                                                ScreenUtil().scaleText * 14,
                                            color: ColorBase.black100,
                                          ),
                                        ),
                                        SizedBox(
                                          height: 20,
                                          width: 20,
                                          child: Radio(
                                            activeColor: ColorBase.primaryRed,
                                            value: sortCommunityOptions[i]
                                                ['value'],
                                            groupValue: _sortCommunityRadio,
                                            onChanged: (value) {
                                              modalSetState(() {
                                                _sortCommunityRadio =
                                                    sortCommunityOptions[i]
                                                        ['value'];
                                                _isApplySortCommunityButtonShown =
                                                    (_currentSortCommunityRadio ==
                                                            _sortCommunityRadio)
                                                        ? false
                                                        : true;
                                              });
                                            },
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                if (i < sortCommunityOptions.length - 1)
                                  Padding(
                                    padding: EdgeInsets.symmetric(vertical: 16),
                                    child: Divider(color: ColorBase.black10),
                                  ),
                              ],
                            ),
                          Visibility(
                            visible: _isApplySortCommunityButtonShown,
                            child: Column(
                              children: [
                                SizedBox(height: 40),
                                Container(
                                  width: double.infinity,
                                  height: 38,
                                  decoration: BoxDecoration(
                                    color: ColorBase.primaryRed,
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                  child: TextButton(
                                    onPressed: () {
                                      _isApplySortCommunityButtonShown = true;
                                      setState(() {
                                        sortCommunity = _sortCommunityRadio;
                                        _loadCommunity();
                                        currentTotalCommunity = 100;
                                        hasMoreCommunity = true;
                                      });

                                      Navigator.pop(context);
                                    },
                                    child: Center(
                                      child: Text(
                                        context.formatString(
                                            AppLocale.terapkan, []),
                                        style: TextStyle(
                                          color: Colors.white,
                                          fontWeight: FontWeight.w500,
                                          fontSize: ScreenUtil().scaleText * 14,
                                        ),
                                        textAlign: TextAlign.center,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(height: 24),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            },
          );
        }).whenComplete(() {
      if (!_isApplySortCommunityButtonShown) {
        setState(() {
          _sortCommunityRadio = _currentSortCommunityRadio;
        });
      }
    });
  }

  void _cancelPolicyModal(BuildContext context, double screenWidth) {
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
        ),
        context: context,
        isScrollControlled: true,
        builder: (context) {
          return StatefulBuilder(
            builder: (BuildContext ctx, StateSetter modalSetState) {
              return Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    InkWell(
                      onTap: () {},
                      child: Center(
                        child: Container(
                          margin: EdgeInsets.only(top: 8, bottom: 16),
                          width: 40,
                          height: 4.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            color: Colors.black26,
                          ),
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          left: 24,
                          right: 24,
                          bottom: MediaQuery.of(context).padding.bottom),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            context.formatString(
                              AppLocale.kebijakanRefundRescheduleTitle,
                              [],
                            ),
                            style: TextStyle(
                              color: ColorBase.black100,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 14,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          if (cancelPolicy.name ==
                              VenueBookingConstant.cancelPolicyStrict) ...[
                            if (reschedulePolicy > 0) ...[
                              Padding(
                                padding: EdgeInsets.symmetric(vertical: 16),
                                child: DottedLine(dashColor: ColorBase.black10),
                              ),
                              Container(
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Container(
                                      height: 18,
                                      width: 18,
                                      child: Center(
                                        child: ClipOval(
                                          child: Container(
                                            height: 16,
                                            width: 16,
                                            child: Image.asset(
                                                'assets/images/ver2/arrow-grey.png',
                                                fit: BoxFit.cover),
                                          ),
                                        ),
                                      ),
                                    ),
                                    SizedBox(width: 12),
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Container(
                                          width: screenWidth - 16 * 4 - 30,
                                          child: Text(
                                            (reschedulePolicy > 0)
                                                ? context.formatString(
                                                    AppLocale
                                                        .kebijakanRefundScheduleDef,
                                                    [
                                                      reschedulePolicy
                                                          .toString()
                                                    ],
                                                  )
                                                : context.formatString(
                                                    AppLocale
                                                        .kebijakanRefundScheduleDefNo,
                                                    [],
                                                  ),
                                            style: TextStyle(
                                              color: ColorBase.black80,
                                              fontFamily: 'Rubik',
                                              fontSize:
                                                  ScreenUtil().scaleText * 14,
                                            ),
                                          ),
                                        ),
                                        SizedBox(height: 6),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ],
                            Padding(
                              padding: EdgeInsets.symmetric(vertical: 16),
                              child: DottedLine(dashColor: ColorBase.black10),
                            ),
                            Container(
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Container(
                                    height: 18,
                                    width: 18,
                                    child: Center(
                                      child: ClipOval(
                                        child: Container(
                                          height: 16,
                                          width: 16,
                                          child: Image.asset(
                                              'assets/images/ver2/arrow.png',
                                              fit: BoxFit.cover),
                                        ),
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: 12),
                                  Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Container(
                                          width: screenWidth - 16 * 4 - 30,
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Text(
                                                context.formatString(
                                                    AppLocale
                                                        .booking_tidak_dapat_dibatalkan,
                                                    []),
                                                style: TextStyle(
                                                  color: ColorBase.black80,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          14,
                                                ),
                                              ),
                                              SizedBox(height: 12),
                                              Text(
                                                context.formatString(
                                                    AppLocale
                                                        .tidak_berlaku_refund,
                                                    []),
                                                style: TextStyle(
                                                  color: ColorBase.primaryRed,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          12,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                              ),
                                            ],
                                          )),
                                      SizedBox(height: 6),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ],
                          if (cancelPolicy.name !=
                              VenueBookingConstant.cancelPolicyStrict) ...[
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                if (reschedulePolicy > 0) ...[
                                  Padding(
                                    padding: EdgeInsets.symmetric(vertical: 16),
                                    child: DottedLine(
                                        dashColor: ColorBase.black10),
                                  ),
                                  Container(
                                    child: Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Container(
                                          height: 18,
                                          width: 18,
                                          child: Center(
                                            child: ClipOval(
                                              child: Container(
                                                height: 16,
                                                width: 16,
                                                child: Image.asset(
                                                    'assets/images/ver2/arrow-grey.png',
                                                    fit: BoxFit.cover),
                                              ),
                                            ),
                                          ),
                                        ),
                                        SizedBox(width: 12),
                                        Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Container(
                                              width: screenWidth - 16 * 4 - 30,
                                              child: Text(
                                                (reschedulePolicy > 0)
                                                    ? context.formatString(
                                                        AppLocale
                                                            .kebijakanRefundScheduleDef,
                                                        [
                                                          reschedulePolicy
                                                              .toString()
                                                        ],
                                                      )
                                                    : context.formatString(
                                                        AppLocale
                                                            .kebijakanRefundScheduleDefNo,
                                                        [],
                                                      ),
                                                style: TextStyle(
                                                  color: ColorBase.black80,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          14,
                                                ),
                                              ),
                                            ),
                                            SizedBox(height: 6),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                                Padding(
                                  padding: EdgeInsets.symmetric(vertical: 16),
                                  child:
                                      DottedLine(dashColor: ColorBase.black10),
                                ),
                                for (var i = 0;
                                    i < cancelPolicy.policies.length;
                                    i++)
                                  Container(
                                    margin: EdgeInsets.only(bottom: 16),
                                    child: Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Container(
                                          height: 18,
                                          width: 18,
                                          child: Center(
                                            child: ClipOval(
                                              child: Container(
                                                height: 16,
                                                width: 16,
                                                // color:
                                                // Color(int.parse(
                                                //     "0xff${cancelPolicy.policies[i].color}")),
                                                child: Image.asset(
                                                    cancelPolicy.policies[i]
                                                                .color ==
                                                            '00C48C'
                                                        ? 'assets/images/ver2/arrow-green-new.png'
                                                        : cancelPolicy
                                                                    .policies[i]
                                                                    .color ==
                                                                'FCB145'
                                                            ? 'assets/images/ver2/arrow-yellow-new.png'
                                                            : 'assets/images/ver2/arrow-red-new.png',
                                                    fit: BoxFit.cover),
                                              ),
                                            ),
                                          ),
                                        ),
                                        // Column(
                                        //   crossAxisAlignment:
                                        //       CrossAxisAlignment.center,
                                        //   children: [
                                        // Container(
                                        //   height: 18,
                                        //   width: 18,
                                        //   child: Center(
                                        //     child: ClipOval(
                                        //       child: Container(
                                        //         height: 16,
                                        //         width: 16,
                                        //         color: Color(int.parse(
                                        //             "0xff${cancelPolicy.policies[i].color}")),
                                        //       ),
                                        //     ),
                                        //   ),
                                        // ),
                                        // Container(
                                        //   height: (cancelPolicy.policies[i]
                                        //               .percentage >
                                        //           0)
                                        //       ? 56
                                        //       : 28,
                                        //   width: 4,
                                        //   color: Color(int.parse(
                                        //       "0xff${cancelPolicy.policies[i].color}")),
                                        // )
                                        //   ],
                                        // ),
                                        SizedBox(width: 12),
                                        Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Container(
                                              width: screenWidth - 16 * 4 - 30,
                                              child: Text(
                                                _getCancelPolicyDescription(
                                                    cancelPolicy.policies[i]
                                                        .percentage),
                                                style: TextStyle(
                                                  color: ColorBase.black80,
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          14,
                                                ),
                                              ),
                                            ),
                                            SizedBox(height: 6),
                                            if (cancelPolicy
                                                    .policies[i].percentage >
                                                0)
                                              Text(
                                                cancelPolicy
                                                        .policies[i].percentage
                                                        .toString() +
                                                    '% Refund',
                                                style: TextStyle(
                                                  color: Color(int.parse(
                                                      "0xff${cancelPolicy.policies[i].color}")),
                                                  fontFamily: 'Rubik',
                                                  fontSize:
                                                      ScreenUtil().scaleText *
                                                          14,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                              ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                // SizedBox(height: 16),
                                // Container(
                                //   width: screenWidth,
                                //   padding: EdgeInsets.all(8),
                                //   decoration: BoxDecoration(
                                //     color: ColorBase.black10,
                                //     borderRadius: BorderRadius.circular(8),
                                //   ),
                                //   child: Row(
                                //     crossAxisAlignment:
                                //         CrossAxisAlignment.start,
                                //     children: [
                                //       Container(
                                //         height: 14,
                                //         width: 14,
                                //         child: SvgPicture.asset(
                                //           'assets/images/info-black.svg',
                                //           fit: BoxFit.contain,
                                //           color: ColorBase.black60,
                                //         ),
                                //       ),
                                //       SizedBox(width: 8),
                                //       Container(
                                //         width: screenWidth - 86,
                                //         child: Text(
                                //           'Dana yang dikembalikan tidak termasuk biaya transaksi.',
                                //           style: TextStyle(
                                //             fontFamily: 'Rubik',
                                //             fontSize:
                                //                 ScreenUtil().scaleText * 12,
                                //             color: ColorBase.black80,
                                //           ),
                                //           maxLines: 10,
                                //         ),
                                //       ),
                                //     ],
                                //   ),
                                // )
                              ],
                            ),
                          ],
                          SizedBox(height: 24),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            },
          );
        });
  }

  void _additionalInformationModal(
      context, double screenWidth, AditionalInformation additionalInformation) {
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
        ),
        context: context,
        isScrollControlled: true,
        builder: (context) {
          return StatefulBuilder(
            builder: (BuildContext ctx, StateSetter modalSetState) {
              return Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    InkWell(
                      onTap: () {},
                      child: Center(
                        child: Container(
                          margin: EdgeInsets.only(top: 8, bottom: 16),
                          width: 40,
                          height: 4.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            color: Colors.black26,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 10),
                    Padding(
                      padding: EdgeInsets.only(
                          left: 24,
                          right: 24,
                          bottom: MediaQuery.of(context).padding.bottom),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            additionalInformation.title,
                            style: TextStyle(
                              color: ColorBase.black100,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 18,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 24),
                          Text(
                            additionalInformation.content,
                            style: TextStyle(
                              color: ColorBase.black80,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 14,
                            ),
                          ),
                          SizedBox(height: 24),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            },
          );
        });
  }

  void _availableVoucherModal(
      context, double screenWidth, double screenHeight) {
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
        ),
        context: context,
        isScrollControlled: true,
        builder: (context) {
          return StatefulBuilder(
            builder: (BuildContext ctx, StateSetter modalSetState) {
              return Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    InkWell(
                      onTap: () {},
                      child: Center(
                        child: Container(
                          margin: EdgeInsets.only(top: 8, bottom: 16),
                          width: 40,
                          height: 4.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            color: Colors.black26,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 10),
                    Padding(
                      padding: EdgeInsets.only(
                          left: 24,
                          right: 24,
                          bottom: MediaQuery.of(context).padding.bottom),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            context.formatString(
                              AppLocale.voucherVenueTitle,
                              [],
                            ),
                            style: TextStyle(
                              color: ColorBase.black100,
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 24),
                          Container(
                            width: screenWidth,
                            padding: EdgeInsets.all(8),
                            decoration: BoxDecoration(
                              color: Color(0xFFF7F7F7),
                              borderRadius: BorderRadius.circular(8),
                              border: Border.all(color: ColorBase.black10),
                            ),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  height: 14,
                                  width: 14,
                                  child: SvgPicture.asset(
                                    'assets/images/info-black.svg',
                                    fit: BoxFit.contain,
                                    color: ColorBase.black60,
                                  ),
                                ),
                                SizedBox(width: 8),
                                Container(
                                  width: screenWidth - 86,
                                  child: Text(
                                    context.formatString(
                                      AppLocale.voucherVenueInfo,
                                      [],
                                    ),
                                    style: TextStyle(
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 12,
                                      color: ColorBase.black80,
                                    ),
                                    maxLines: 10,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(height: 20),
                          Container(
                            constraints:
                                BoxConstraints(maxHeight: screenHeight * 0.45),
                            child: SingleChildScrollView(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  for (var i = 0; i < vouchers.length; i++)
                                    Stack(
                                      children: [
                                        Container(
                                          padding: EdgeInsets.symmetric(
                                              vertical: 16, horizontal: 22),
                                          margin: EdgeInsets.only(bottom: 16),
                                          decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(8),
                                            color: Colors.white,
                                          ),
                                          width: screenWidth -
                                              horizontalPadding * 2,
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              GestureDetector(
                                                onTap: () {},
                                                child: Container(
                                                  color: Colors.transparent,
                                                  child: Column(
                                                    crossAxisAlignment:
                                                        CrossAxisAlignment
                                                            .start,
                                                    children: [
                                                      Text(
                                                        vouchers[i]
                                                                    .voucherDesc !=
                                                                null
                                                            ? vouchers[i]
                                                                .voucherDesc
                                                            : vouchers[i]
                                                                .description,
                                                        style: TextStyle(
                                                          color: ColorBase
                                                              .black100,
                                                          fontFamily: 'Rubik',
                                                          fontSize: ScreenUtil()
                                                                  .scaleText *
                                                              16,
                                                          fontWeight:
                                                              FontWeight.w500,
                                                        ),
                                                        maxLines: 2,
                                                        overflow: TextOverflow
                                                            .ellipsis,
                                                      ),
                                                      if (vouchers[i]
                                                                  .minTransaction !=
                                                              null &&
                                                          vouchers[i]
                                                                  .minTransaction >
                                                              0)
                                                        SizedBox(height: 4),
                                                      if (vouchers[i]
                                                                  .minTransaction !=
                                                              null &&
                                                          vouchers[i]
                                                                  .minTransaction >
                                                              0)
                                                        Text(
                                                          '${context.formatString(
                                                            AppLocale.minTrans,
                                                            [],
                                                          )} Rp ${Helpers.formatRupiah(vouchers[i].minTransaction.toString())}',
                                                          style: TextStyle(
                                                            color: ColorBase
                                                                .black80,
                                                            fontFamily: 'Rubik',
                                                            fontSize: ScreenUtil()
                                                                    .scaleText *
                                                                12,
                                                          ),
                                                          overflow: TextOverflow
                                                              .ellipsis,
                                                        ),
                                                      if (vouchers[i]
                                                                  .minTransaction ==
                                                              null &&
                                                          vouchers[i]
                                                                  .minTransaction ==
                                                              0)
                                                        Text(
                                                          context.formatString(
                                                            AppLocale
                                                                .tanpaMinimumTrans,
                                                            [],
                                                          ),
                                                          style: TextStyle(
                                                            color: ColorBase
                                                                .black80,
                                                            fontFamily: 'Rubik',
                                                            fontSize: ScreenUtil()
                                                                    .scaleText *
                                                                12,
                                                          ),
                                                          overflow: TextOverflow
                                                              .ellipsis,
                                                        ),
                                                      if (vouchers[i]
                                                              .dateDiff !=
                                                          null)
                                                        SizedBox(height: 4),
                                                      if (vouchers[i]
                                                              .dateDiff !=
                                                          null)
                                                        Row(
                                                          children: [
                                                            Text(
                                                              vouchers[i].dateDiff <=
                                                                      7
                                                                  ? context.formatString(
                                                                          AppLocale
                                                                              .berakhirDalam,
                                                                          []) +
                                                                      ' ${vouchers[i].dateDiff} ' +
                                                                      context.formatString(
                                                                          AppLocale
                                                                              .hari,
                                                                          [])
                                                                  : context.formatString(
                                                                          AppLocale
                                                                              .berlakuHingga,
                                                                          []) +
                                                                      ' ${vouchers[i].date}',
                                                              style: TextStyle(
                                                                color: ColorBase
                                                                    .black80,
                                                                fontFamily:
                                                                    'Rubik',
                                                                fontSize:
                                                                    ScreenUtil()
                                                                            .scaleText *
                                                                        12,
                                                              ),
                                                            ),
                                                          ],
                                                        ),
                                                      if (vouchers[i]
                                                              .endDateDiff !=
                                                          null)
                                                        SizedBox(height: 4),
                                                      if (vouchers[i]
                                                              .endDateDiff !=
                                                          null)
                                                        Row(
                                                          children: [
                                                            Text(
                                                              vouchers[i].endDateDiff <=
                                                                      7
                                                                  ? context.formatString(
                                                                          AppLocale
                                                                              .berakhirDalam,
                                                                          []) +
                                                                      ' ${vouchers[i].endDateDiff} ' +
                                                                      context.formatString(
                                                                          AppLocale
                                                                              .hari,
                                                                          [])
                                                                  : context.formatString(
                                                                          AppLocale
                                                                              .berlakuHingga,
                                                                          []) +
                                                                      ' ${vouchers[i].endDateFormat}',
                                                              style: TextStyle(
                                                                color: ColorBase
                                                                    .black80,
                                                                fontFamily:
                                                                    'Rubik',
                                                                fontSize:
                                                                    ScreenUtil()
                                                                            .scaleText *
                                                                        12,
                                                              ),
                                                            ),
                                                          ],
                                                        ),
                                                    ],
                                                  ),
                                                ),
                                              ),
                                              Padding(
                                                padding: EdgeInsets.symmetric(
                                                    vertical: 12),
                                                child: DottedLine(
                                                  dashColor: ColorBase.black40,
                                                ),
                                              ),
                                              Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: [
                                                  Text(
                                                    vouchers[i].name,
                                                    style: TextStyle(
                                                      color: ColorBase.black100,
                                                      fontFamily: 'Rubik',
                                                      fontSize: ScreenUtil()
                                                              .scaleText *
                                                          12,
                                                      fontWeight:
                                                          FontWeight.w500,
                                                    ),
                                                  ),
                                                  GestureDetector(
                                                    onTap: () {
                                                      FlutterClipboard.copy(
                                                          vouchers[i].name);
                                                      customFlutterToastWithoutClose(
                                                        context: context,
                                                        msg:
                                                            "${context.formatString(
                                                          AppLocale
                                                              .berhasilSalinKode,
                                                          [],
                                                        )} ${vouchers[i].name}",
                                                        customToastTypeWithoutClose:
                                                            CustomToastTypeWithoutClose
                                                                .INFO,
                                                      );
                                                    },
                                                    child: Text(
                                                      context.formatString(
                                                        AppLocale.salin,
                                                        [],
                                                      ),
                                                      style: TextStyle(
                                                        color: ColorBase
                                                            .primaryRed,
                                                        fontFamily: 'Rubik',
                                                        fontSize: ScreenUtil()
                                                                .scaleText *
                                                            12,
                                                        fontWeight:
                                                            FontWeight.w500,
                                                      ),
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                        Positioned(
                                          right: 0,
                                          child: SvgPicture.asset(
                                            'assets/images/ver2/ticket-accent-primary-red.svg',
                                            width: 60,
                                            fit: BoxFit.contain,
                                          ),
                                        ),
                                      ],
                                    )
                                ],
                              ),
                            ),
                          ),
                          SizedBox(height: 24),
                          GestureDetector(
                            onTap: () async {
                              if (category.length == 1) {
                                int result =
                                    await _checkPickedSport(category[0]);

                                if (result == 0) {
                                  chooseField(category[0]);
                                } else {}
                              } else {
                                _sportSelectorModal(context, screenWidth,
                                    screenHeight, category);
                              }
                            },
                            child: Container(
                              height: 38,
                              decoration: BoxDecoration(
                                color: ColorBase.primaryRed,
                                borderRadius: BorderRadius.circular(8),
                              ),
                              child: Center(
                                child: Text(
                                  context.formatString(
                                    AppLocale.pilihLapangan,
                                    [],
                                  ),
                                  style: TextFontConst.RUBIK_MEDIUM_WHITE_14
                                      .copyWith(height: 1),
                                ),
                              ),
                            ),
                          ),
                          SizedBox(height: 24),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            },
          );
        });
  }

  void _membershipTnCModal(
    context,
    double screenWidth,
    double screenHeight,
    VenueMembership membershipPackage,
    int membershipsId,
    int membershipsFieldId,
    String membershipsType,
    String membershipsName,
    List membershipsTnc,
    String membershipsNames,
    String membershipsSlotRule,
  ) {
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
        ),
        context: context,
        isScrollControlled: true,
        builder: (context) {
          return StatefulBuilder(
            builder: (BuildContext ctx, StateSetter modalSetState) {
              return Container(
                padding: EdgeInsets.only(
                    left: 24,
                    right: 24,
                    bottom: MediaQuery.of(context).padding.bottom),
                height: screenHeight * 0.8,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    InkWell(
                      onTap: () {},
                      child: Center(
                        child: Container(
                          margin: EdgeInsets.only(top: 8, bottom: 16),
                          width: 40,
                          height: 4.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            color: Colors.black26,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      (membershipsType == 'bundling')
                          ? context.formatString(AppLocale.paket_bundling, [])
                          : context.formatString(AppLocale.paket_langganan, []),
                      style: TextStyle(
                        color: ColorBase.black60,
                        fontFamily: 'Rubik',
                        fontSize: ScreenUtil().scaleText * 14,
                        height: 1.4,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    Text(
                      membershipsNames,
                      style: TextStyle(
                        color: ColorBase.black100,
                        fontFamily: 'Rubik',
                        fontSize: ScreenUtil().scaleText * 18,
                        height: 1.4,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(vertical: 16),
                      child: DottedLine(dashColor: ColorBase.black10),
                    ),
                    Text(
                      context.formatString(AppLocale.syarat_ketentuan, []),
                      style: TextStyle(
                        color: ColorBase.black100,
                        fontFamily: 'Rubik',
                        fontSize: ScreenUtil().scaleText * 14,
                        height: 1.4,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    SizedBox(height: 8),
                    Expanded(
                      child: SingleChildScrollView(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            for (var i = 0; i < membershipsTnc.length; i++)
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    (i + 1).toString() + '. ',
                                    style: TextStyle(
                                      overflow: TextOverflow.clip,
                                      color: ColorBase.black80,
                                      fontFamily: 'Rubik',
                                      fontSize: ScreenUtil().scaleText * 14,
                                      height: 1.4,
                                      fontWeight: FontWeight.w400,
                                    ),
                                  ),
                                  Container(
                                    width: screenWidth - 65,
                                    child: Text(
                                      membershipsTnc[i],
                                      style: TextStyle(
                                        color: ColorBase.black80,
                                        fontFamily: 'Rubik',
                                        fontSize: ScreenUtil().scaleText * 14,
                                        height: 1.4,
                                        fontWeight: FontWeight.w400,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            SizedBox(
                              height: 24,
                            ),
                          ],
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 8,
                    ),
                    Text(
                      context.formatString(AppLocale.dengan_melanjutkan, []),
                      style: TextStyle(
                        color: ColorBase.black80,
                        fontFamily: 'Rubik',
                        fontSize: ScreenUtil().scaleText * 12,
                        height: 1.4,
                        fontWeight: FontWeight.w400,
                      ),
                      overflow: TextOverflow.clip,
                    ),
                    SizedBox(
                      height: 12,
                    ),
                    GestureDetector(
                      onTap: () {
                        if (membershipsType == 'bundling') {
                          int fieldId =
                              membershipPackage.activeFields[0].fieldId;
                          String fieldName =
                              membershipPackage.activeFields[0].fieldName;
                          int sportId =
                              membershipPackage.activeFields[0].sportId;
                          String sportName =
                              membershipPackage.activeFields[0].sportName;
                          //   Navigator.of(context)
                          //       .pushNamed(NewChooseScheduleBundlingScreen.routeName,
                          //           // MembershipChooseScheduleScreen.routeName,
                          //           arguments: {
                          //         // 'venue_id': otherVenueList[i].id

                          //         'venue_id': widget.venueId,
                          //         'integration_type': widget.integrationType,
                          //         'field_id': membershipsFieldId,
                          //         'memberships_id': membershipsId,
                          //         'memberships_type': membershipsType,
                          //         'memberships_name': membershipsName,
                          //         'memberships_slot_rule': membershipsSlotRule,
                          //         // 'sport_id': pickedSportId,
                          //         // 'sport_name': pickedSportName,
                          //         // 'remove_until_route': widget.removeUntilRoute,
                          //         // 'booking_action': widget.bookingAction,
                          //         'integration_type': widget.integrationType,
                          //       });
                          Navigator.of(context).pushNamed(
                              NewChooseScheduleBundlingScreen.routeName,
                              arguments: {
                                'venue_id': widget.venueId,
                                'integration_type': widget.integrationType,
                                'field_id': membershipsFieldId,
                                'field_name': fieldName,
                                'package': membershipPackage,
                                'package_id': membershipPackage.id,
                                'package_type': membershipPackage.type,
                                'package_name': membershipPackage.name,
                                'package_slot_rule': membershipPackage.slotRule,
                                'package_active_days':
                                    membershipPackage.activeDays,
                                'package_booking_start':
                                    membershipPackage.bookingPeriodStartDate,
                                'package_booking_end':
                                    membershipPackage.bookingPeriodEndDate,
                                'sport_id': sportId,
                                'sport_name': sportName,
                              });
                        } else {
                          Navigator.of(context).pushNamed(
                              ChooseScheduleRecurringScreen.routeName,
                              // MembershipChooseScheduleScreen.routeName,
                              arguments: {
                                // 'venue_id': otherVenueList[i].id

                                'venue_id': widget.venueId,
                                'integration_type': widget.integrationType,
                                'field_id': membershipsFieldId,
                                'memberships_id': membershipsId,
                                'memberships_type': membershipsType,
                                'memberships_name': membershipsName,
                                'memberships_slot_rule': membershipsSlotRule,
                                // 'sport_id': pickedSportId,
                                // 'sport_name': pickedSportName,
                                // 'remove_until_route': widget.removeUntilRoute,
                                // 'booking_action': widget.bookingAction,
                                'integration_type': widget.integrationType,
                              });
                        }
                        // MembershipChooseScheduleScreen
                      },
                      child: Container(
                        width: screenWidth,
                        height: 38,
                        alignment: Alignment.center,
                        padding: EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: ColorBase.primaryRed,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Container(
                          width: screenWidth - 86,
                          alignment: Alignment.center,
                          child: Text(
                            context.formatString(AppLocale.beliPaket, []),
                            style: TextStyle(
                              fontFamily: 'Rubik',
                              fontSize: ScreenUtil().scaleText * 14,
                              height: 1.4,
                              fontWeight: FontWeight.w500,
                              color: ColorBase.primaryWhite,
                            ),
                            maxLines: 10,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                  ],
                ),
              );
            },
          );
        });
  }

  void _sportSelectorModal(BuildContext context, double screenWidth,
      double screenHeight, List<CategoryData> category) async {
    double paddingBottom = MediaQuery.of(context).padding.bottom;
    showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(8.0)),
      ),
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return StatefulBuilder(
          builder: (BuildContext ctx, StateSetter modalSetState) {
            return BlocProvider.value(
              value: categoryBloc,
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    InkWell(
                      onTap: () {},
                      child: Center(
                        child: Container(
                          margin: EdgeInsets.only(top: 8, bottom: 16),
                          width: 40,
                          height: 4.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            color: Colors.black26,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 10),
                    Padding(
                      padding: EdgeInsets.only(
                          left: 16,
                          right: 16,
                          bottom: MediaQuery.of(context).padding.bottom),
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                context.formatString(
                                  AppLocale.pilihCabangOlahraga,
                                  [],
                                ),
                                style: TextStyle(
                                  color: ColorBase.black100,
                                  fontFamily: 'Rubik',
                                  fontSize: ScreenUtil().scaleText * 18,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              GestureDetector(
                                onTap: () {
                                  Navigator.pop(context);
                                },
                                child: Icon(
                                  Icons.close,
                                  color: ColorBase.black80,
                                ),
                              ),
                            ],
                          ),
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 14),
                            child: Divider(color: ColorBase.black10),
                          ),
                          Container(
                            constraints:
                                BoxConstraints(maxHeight: screenHeight * 3 / 4),
                            width: screenWidth,
                            child: SingleChildScrollView(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  for (var i = 0; i < category.length; i++)
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        GestureDetector(
                                          onTap: () {
                                            modalSetState(
                                              () {
                                                setState(() {
                                                  for (var j = 0;
                                                      j < category.length;
                                                      j++) {
                                                    category[j].isPicked =
                                                        false;
                                                  }
                                                  category[i].isPicked = true;
                                                  if (category[i]
                                                          .totalCommunity ==
                                                      0) {
                                                  } else {}
                                                });
                                              },
                                            );
                                          },
                                          child: Container(
                                            width: screenWidth,
                                            color: Colors.transparent,
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment
                                                      .spaceBetween,
                                              children: [
                                                Row(
                                                  children: [
                                                    Container(
                                                        height: 24,
                                                        width: 24,
                                                        child: SvgPicture.network(
                                                            BaseUrlConfig
                                                                    .baseAssetUrl +
                                                                category[i]
                                                                    .svgPath)),
                                                    SizedBox(
                                                      width: 8,
                                                    ),
                                                    Text(
                                                      Helpers.capitalizeString(
                                                          category[i]
                                                              .name
                                                              .toLowerCase()),
                                                      style: TextStyle(
                                                        color:
                                                            ColorBase.black80,
                                                        fontFamily: 'Rubik',
                                                        fontSize: ScreenUtil()
                                                                .scaleText *
                                                            14,
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                                Container(
                                                  height: 20,
                                                  width: 20,
                                                  child: (category[i]
                                                              .isPicked !=
                                                          true)
                                                      ? Image.asset(
                                                          'assets/images/radio-black.png',
                                                          fit: BoxFit.contain,
                                                        )
                                                      : Image.asset(
                                                          'assets/images/radio-red.png',
                                                          fit: BoxFit.contain,
                                                        ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                        if (i < category.length - 1)
                                          Padding(
                                            padding: EdgeInsets.symmetric(
                                                vertical: 14),
                                            child: Divider(
                                                color: ColorBase.black10),
                                          ),
                                      ],
                                    ),
                                ],
                              ),
                            ),
                          ),
                          SizedBox(height: 32),
                        ],
                      ),
                    ),
                    Divider(
                      color: ColorBase.black10,
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          top: 16,
                          left: 16,
                          right: 16,
                          bottom: (MediaQuery.of(context).padding.bottom > 16)
                              ? MediaQuery.of(context).padding.bottom
                              : 16),
                      child: Container(
                        width: screenWidth - 16 * 2,
                        height: 30 +
                            ((MediaQuery.of(context).padding.bottom > 16)
                                    ? MediaQuery.of(context).padding.bottom
                                    : 16.0)
                                .toDouble(),
                        decoration: BoxDecoration(
                          border: Border.all(color: ColorBase.primaryRed),
                          color: ColorBase.primaryRed,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: TextButton(
                          onPressed: () async {
                            Navigator.pop(context);
                            for (int i = 0; i < category.length; i++) {
                              if (category[i].isPicked) {
                                int result =
                                    await _checkPickedSport(category[i]);

                                if (result == 0) {
                                  chooseField(category[i]);
                                } else {}
                              }
                            }
                          },
                          child: Text(
                            context.formatString(
                              AppLocale.terapkan,
                              [],
                            ),
                            style: TextStyle(
                              color: ColorBase.primaryWhite,
                              fontWeight: FontWeight.w500,
                              height: 1.4,
                              fontSize: ScreenUtil().scaleText * 14,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

  void _coachSportSelectorModal(
      BuildContext context,
      double screenWidth,
      double screenHeight,
      List<Sports> category,
      int fieldAdditionalServiceId) async {
    double paddingBottom = MediaQuery.of(context).padding.bottom;
    showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(8.0)),
      ),
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return StatefulBuilder(
          builder: (BuildContext ctx, StateSetter modalSetState) {
            return BlocProvider.value(
              value: categoryBloc,
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    SizedBox(height: 18),
                    Padding(
                      padding: EdgeInsets.only(
                          left: 16,
                          right: 16,
                          bottom: MediaQuery.of(context).padding.bottom),
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                context.formatString(
                                  AppLocale.pilihCabangOlahraga,
                                  [],
                                ),
                                style: TextStyle(
                                  color: ColorBase.black100,
                                  fontFamily: 'Rubik',
                                  fontSize: ScreenUtil().scaleText * 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              GestureDetector(
                                onTap: () {
                                  Navigator.pop(context);
                                },
                                child: Icon(
                                  Icons.close,
                                  color: ColorBase.black80,
                                ),
                              ),
                            ],
                          ),
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 14),
                            child: Divider(color: ColorBase.black10),
                          ),
                          Container(
                            constraints:
                                BoxConstraints(maxHeight: screenHeight * 3 / 4),
                            width: screenWidth,
                            child: SingleChildScrollView(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  for (var i = 0; i < category.length; i++)
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        GestureDetector(
                                          onTap: () {
                                            modalSetState(
                                              () {
                                                setState(() {
                                                  for (var j = 0;
                                                      j < category.length;
                                                      j++) {
                                                    category[j].isPicked =
                                                        false;
                                                  }
                                                  category[i].isPicked = true;
                                                });
                                              },
                                            );
                                          },
                                          child: Container(
                                            width: screenWidth,
                                            color: Colors.transparent,
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment
                                                      .spaceBetween,
                                              children: [
                                                Row(
                                                  children: [
                                                    Container(
                                                        height: 20,
                                                        width: 20,
                                                        child: SvgPicture.network(
                                                            BaseUrlConfig
                                                                    .baseAssetUrl +
                                                                category[i]
                                                                    .svgPath)),
                                                    SizedBox(
                                                      width: 8,
                                                    ),
                                                    Text(
                                                      Helpers.capitalizeString(
                                                          category[i]
                                                              .name
                                                              .toLowerCase()),
                                                      style: TextStyle(
                                                        color:
                                                            ColorBase.black100,
                                                        fontFamily: 'Rubik',
                                                        fontSize: ScreenUtil()
                                                                .scaleText *
                                                            14,
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                                Container(
                                                  height: 20,
                                                  width: 20,
                                                  child: (category[i]
                                                              .isPicked !=
                                                          true)
                                                      ? Image.asset(
                                                          'assets/images/radio-black.png',
                                                          fit: BoxFit.contain,
                                                        )
                                                      : Image.asset(
                                                          'assets/images/radio-red.png',
                                                          fit: BoxFit.contain,
                                                        ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                        if (i < category.length - 1)
                                          Padding(
                                            padding: EdgeInsets.symmetric(
                                                vertical: 14),
                                            child: Divider(
                                                color: ColorBase.black10),
                                          ),
                                      ],
                                    ),
                                ],
                              ),
                            ),
                          ),
                          SizedBox(height: 32),
                        ],
                      ),
                    ),
                    Divider(
                      color: ColorBase.black10,
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          top: 16,
                          left: 16,
                          right: 16,
                          bottom: (MediaQuery.of(context).padding.bottom > 16)
                              ? MediaQuery.of(context).padding.bottom
                              : 16),
                      child: Container(
                        width: screenWidth - 16 * 2,
                        height: 30 +
                            ((MediaQuery.of(context).padding.bottom > 16)
                                    ? MediaQuery.of(context).padding.bottom
                                    : 16.0)
                                .toDouble(),
                        decoration: BoxDecoration(
                          border: Border.all(color: ColorBase.primaryRed),
                          color: ColorBase.primaryRed,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: TextButton(
                          onPressed: () async {
                            Navigator.pop(context);
                            for (int i = 0; i < category.length; i++) {
                              if (category[i].isPicked) {
                                int result =
                                    await _checkPickedSportCoach(category[i]);

                                if (result == 0) {
                                  chooseFieldCoach(
                                      category[i], fieldAdditionalServiceId);
                                } else {}
                              }
                            }
                          },
                          child: Text(
                            context.formatString(
                              AppLocale.terapkan,
                              [],
                            ),
                            style: TextStyle(
                              color: ColorBase.primaryWhite,
                              fontWeight: FontWeight.w500,
                              height: 1.4,
                              fontSize: ScreenUtil().scaleText * 14,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

  dynamic onGoBack() {
    setState(() {
      _refreshData();
      _updateTotalCart();
    });
  }

  void _loadActivity() {
    eventVenuesBloc = BlocProvider.of<VenueDetailBloc>(context)
      ..add(FetchEventVenues(
        widget.venueId,
        0,
        10,
        categoryName,
        filterCoaching,
        filterBookedViaAyo,
        filterSuperhost,
        filterOfficialByVenue,
        selectedLevelList,
        timeFilterSelected,
        filterDateActivity,
        widget.context,
      ));

    setState(() {
      isLoadActivity = true;
    });
  }

  void _loadCoach() {
    coachVenuesBloc = BlocProvider.of<VenueDetailBloc>(context)
      ..add(FetchCoachVenues(
        widget.venueId,
        0,
        10,
        [],
        widget.context,
      ));

    setState(() {
      isLoadCoach = true;
    });
  }

  void _loadMembership() {
    membershipVenuesBloc = BlocProvider.of<VenueDetailBloc>(context)
      ..add(FetchMembershipVenues(
          widget.context, widget.venueId, 0, 10, membershipTypes));

    setState(() {
      isLoadMembership = true;
    });
  }

  void _loadCommunity() {
    communitiesBloc = BlocProvider.of<VenueDetailBloc>(context)
      ..add(FetchCommunities(
        widget.venueId,
        0,
        100,
        [],
        sortCommunity,
        widget.context,
      ));

    setState(() {
      isLoadCommunity = true;
    });
  }

  void _refreshData() async {
    setState(() {
      isLoading = false;
    });
  }

  void _getHeaderImage() {
    setState(() {
      if ((selectedSport.toLowerCase()) == 'sepak bola') {
        headerImage = 'header-sepak-bola.png';
      } else if ((selectedSport.toLowerCase()) == 'futsal') {
        headerImage = 'header-fustal.png';
      } else if ((selectedSport.toLowerCase()) == 'mini soccer') {
        headerImage = 'header-mini-soccer.png';
      } else if ((selectedSport.toLowerCase()) == 'badminton' ||
          (selectedSport.toLowerCase()) == 'bulu tangkis') {
        headerImage = 'header-badminton.png';
      } else if ((selectedSport.toLowerCase()) == 'basket ball' ||
          (selectedSport.toLowerCase()) == 'bola basket') {
        headerImage = 'header-basket-ball.png';
      } else if ((selectedSport.toLowerCase()) == 'tenis meja') {
        headerImage = 'header-tenis-meja.png';
      } else if ((selectedSport.toLowerCase()) == 'tenis') {
        headerImage = 'header-tennis.png';
      } else {
        headerImage = 'header-sepak-bola.png';
      }
    });
  }
}