import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/view/mobile/find/detail_matches_in_regions/detail_matches_regions_controller.dart';
import 'package:betting/view/mobile/find/detail_matches_in_regions/stats_matches_regions/stats_matches_regions_controller.dart';
import 'package:betting/view/mobile/find/detail_matches_in_regions/summary_matches_regions/summary_matches_regions_controller.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';
import '../../../../../../commom/widget/cache_network_custom.dart';
import '../../../../../../routes/app_pages.dart';
import 'h2h_matches_regions/h2h_matches_regions_controller.dart';
import 'line_ups_match/line_up_match_controller.dart';

class DetailMatchesRegionsPage extends GetWidget<DetailMatchesRegionsController>{
  @override
  final controller = Get.put(DetailMatchesRegionsController());

  DetailMatchesRegionsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
      builder: (context, orientation) {
        final lineUpController = Get.put(LineUpsMatchController());

        //if (Device.get().isTablet) {
          if (orientation == Orientation.portrait) {
            lineUpController.isLandScape.value = false;
          } else {
            lineUpController.isLandScape.value = true;
          }
        // } else {
        //   lineUpController.isLandScape.value = false;
        // }

        lineUpController.update();

        return Stack(
        children: [
          Image.asset(
            "assets/images/background_app_betting.jpg",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Scaffold(
              backgroundColor: Colors.transparent,
              appBar:
              MediaQuery.of(context).orientation == Orientation.landscape ?
              controller.isVisiableYt.value == true ||  controller.isVisiablebackgroudYt.value == true?
              null: AppBar(
                title:
                Obx(() => Center(
                  child:
                  Visibility(
                    visible: controller.isHeader.value==false,
                    child:
                    Row(
                      children: [
                        Expanded(
                          flex:2,
                          child: InkWell(
                              onTap: () {
                                Get.toNamed(Routes.detailTeams);
                              },
                              child:
                              Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 24.w, height: 24.h,)
                          ),),
                        Expanded(
                          flex: 1,
                          child:
                          controller.itemArgument.value.status == 'FINISHED'?
                          Text('${controller.itemArgument.value.ftScore}',textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16.sp),)
                              : Text(controller.outputTimeFormat.format(DateFormat('HH:mm:ss').parse('${controller.itemArgument.value.time}')),textAlign: TextAlign.center,style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16.sp),)
                          ,
                        ),
                        Expanded(
                          flex:2,
                          child: InkWell(
                              onTap: () {
                                Get.toNamed(Routes.detailTeams);
                              },
                              child: Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 24.w, height: 24.h,)
                          ),),

                      ],
                    ),

                  ),
                ) ),
                centerTitle: true,
                backgroundColor: Colors.transparent,
                automaticallyImplyLeading: false,
                actions: [

                  Obx(() =>
                  controller.isHeader.value==false? const SizedBox():

                  InkWell(
                    onTap: (){
                      controller.isVisiablebackgroudYt.value =! controller.isVisiablebackgroudYt.value;
                      controller.isVisiable.value= false;
                      controller.isVisiableYt.value= false;
                    },
                    child: const Icon(Icons.video_camera_back, color: Colors.white,size: 24,),

                  ),),
                  SizedBox(width: 30.w,),
             InkWell(
                  onTap: (){
                    controller.isVisiable.value =!  controller.isVisiable.value;
                    controller.isVisiablebackgroudYt.value= false;
                    controller.isVisiableYt.value= false;

                  },
                  child:  Image.asset('assets/images/san.jpg', width: 24, height: 24,),
                ),
                  SizedBox(width: 10.h,),
                ],
                leading:InkWell(
                  onTap: (){
                    Get.back();
                    Get.delete<DetailMatchesRegionsController>();
                    Get.delete<SummaryMatchesRegionsController>();
                    Get.delete<StatsMatchesRegionsController>();
                    Get.delete<H2hMatchesRegionsController>();
                  },
                  child:   const Icon(CupertinoIcons.back, color: Colors.white, size: 24,),
                ),
              ) :  AppBar(
                title:
                Obx(() => Center(
                  child:
                  Visibility(
                    visible: controller.isHeader.value==false,
                    child:
                    Row(
                      children: [
                        Expanded(
                          flex:2,
                          child: InkWell(
                              onTap: () {
                                Get.toNamed(Routes.detailTeams);
                              },
                              child:
                              Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 24.w, height: 24.h,)
                          ),),
                        Expanded(
                          flex: 1,
                          child:
                          controller.itemArgument.value.status == 'FINISHED'?
                          Text('${controller.itemArgument.value.ftScore}',textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16.sp),)
                              : Text(controller.outputTimeFormat.format(DateFormat('HH:mm:ss').parse('${controller.itemArgument.value.time}')),textAlign: TextAlign.center,style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16.sp),)
                          ,
                        ),
                        Expanded(
                          flex:2,
                          child: InkWell(
                              onTap: () {
                                Get.toNamed(Routes.detailTeams);
                              },
                              child: Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 24.w, height: 24.h,)
                          ),),

                      ],
                    ),

                  ),
                ) ),
                centerTitle: true,
                backgroundColor: Colors.transparent,
                automaticallyImplyLeading: false,
                actions: [

                  Obx(() =>
                  controller.isHeader.value==false? const SizedBox():

                  InkWell(
                    onTap: (){
                      controller.isVisiablebackgroudYt.value =! controller.isVisiablebackgroudYt.value;
                      controller.isVisiable.value= false;
                      controller.isVisiableYt.value= false;
                    },
                    child: const Icon(Icons.video_camera_back, color: Colors.white,size: 24,),

                  ),),
                  SizedBox(width: 30.w,),
                  InkWell(
                    onTap: (){
                      controller.isVisiable.value =!  controller.isVisiable.value;
                      controller.isVisiablebackgroudYt.value= false;
                      controller.isVisiableYt.value= false;

                    },
                    child:  Image.asset('assets/images/san.jpg', width: 24, height: 24,),
                  ),
                  SizedBox(width: 10.h,),
                ],
                leading:InkWell(
                  onTap: (){
                    Get.back();
                    Get.delete<DetailMatchesRegionsController>();
                    Get.delete<SummaryMatchesRegionsController>();
                    Get.delete<StatsMatchesRegionsController>();
                    Get.delete<H2hMatchesRegionsController>();
                  },
                  child:   const Icon(CupertinoIcons.back, color: Colors.white, size: 24,),
                ),
              ),
              body:
              NestedScrollView(
                physics:  const ClampingScrollPhysics(),
                controller: controller.scrollController,
                headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                  return [
                    Obx(() => SliverAppBar(
                      automaticallyImplyLeading: false,
                      backgroundColor: Colors.transparent,
                      toolbarHeight:controller.checkHeight(),
                      collapsedHeight:controller.checkHeight(),
                      flexibleSpace:Column(
                        children: [
                          MediaQuery.of(context).orientation == Orientation.landscape ?
                          controller.isVisiableYt.value == true ||  controller.isVisiablebackgroudYt.value == true?  Container(height: 15,): const SizedBox():const SizedBox(),
                          bannerDetailMatches(context),
                        ],
                      ),
                    )),

                    SliverPersistentHeader(
                      floating: false,
                      delegate: MyDelegate(),pinned: true,),
                  ];
                },
                body: GetBuilder<DetailMatchesRegionsController>(builder: (controller) {
                  return contentDetailMatches(controller, context);
                },),

              )
          )
        ],
      );
      },
    );
  }

  Container contentDetailMatches(DetailMatchesRegionsController controller, BuildContext context) {
    return Container(
                  margin: EdgeInsets.symmetric(horizontal: 8.w),
                  child:   NotificationListener<ScrollNotification>(
                      onNotification: (ScrollNotification notification) {
                        if (notification.metrics.axis == Axis.vertical &&
                            notification.metrics.pixels > 0 &&
                            notification.metrics.pixels <= notification.metrics.maxScrollExtent) {
                          controller.isHeader.value = false;
                        } else {
                          controller.isHeader.value = true;
                        }
                        return true;
                      },
                      child:
                      Column(
                        children: [
                          MediaQuery.of(context).orientation == Orientation.landscape?controller.isVisiablebackgroudYt.value == true || controller.isVisiableYt.value == true ||controller.isVisiable.value==true  ? Container(): const PreferredSize(preferredSize: Size(double.infinity, 1), child: Divider(color: Colors.white,)):const PreferredSize(preferredSize: Size(double.infinity, 1), child: Divider(color: Colors.white,)),
                          MediaQuery.of(context).orientation == Orientation.landscape ?controller.isVisiablebackgroudYt.value == true || controller.isVisiableYt.value == true ||controller.isVisiable.value==true ?  Container():
                          Expanded(
                              child: PageView(
                                onPageChanged: (value) {
                                  controller.onPageViewChange(value);
                                  controller.isHeader.value= false;
                                },
                                controller: controller.pageController,
                                physics: const NeverScrollableScrollPhysics(),
                                children: controller.listPage,
                              )) :Expanded(
                              child: PageView(
                                onPageChanged: (value) {
                                  controller.onPageViewChange(value);
                                  controller.isHeader.value = false;
                                },
                                controller: controller.pageController,
                                physics: const NeverScrollableScrollPhysics(),
                                children: controller.listPage,
                              ))
                        ],
                      )),
                );
  }

  Obx bannerDetailMatches(BuildContext context) {
    return Obx(() => Container(
      margin:  EdgeInsets.symmetric(horizontal: 10.w),
      child: Column(
        children: [
          Visibility(
              visible: controller.isVisiable.value,
              child:
              SizedBox(
                width: double.infinity,
                height: MediaQuery.of(context).orientation == Orientation.landscape ?Get.height/2*3/2-3: 220.h,
                child:
                Stack(
                  children: [
                    SizedBox(
                      height: MediaQuery.of(context).orientation == Orientation.landscape ?Get.height/2*3/2-3: 220.h,
                      width: double.infinity,
                      child: Image.asset('assets/images/pitch2.png', fit: BoxFit.fill,),
                    ),
                    Positioned(
                      left: 32.w,
                      top: 16.h,
                      bottom: 16.h,
                      right: 32.w,
                      child:
                      Swiper(
                        autoplayDelay: 5000,
                        autoplay: true,
                        itemCount: 7 ,
                        onIndexChanged: (value) {
                          controller.indexSwiper.value =value;
                        },
                        itemBuilder:(context, index){
                          return controller.listStatistical[index];
                        },
                      ),

                    ),
                    Positioned(
                        right: 8.w,
                        top: 8.h,
                        child:  Row(
                          children: [
                            InkWell(
                              onTap: (){
                                controller.isZoom.value =! controller.isZoom.value;
                              },
                              child:  Icon(Icons.fullscreen_exit_outlined,size: 24.sp,color: Colors.white,),
                            ),
                            SizedBox(width: 8.w,),
                            InkWell(
                              onTap: (){
                                controller.isVisiable.value = false;
                              },
                              child:  Icon(Icons.close,size: 24.sp,color: Colors.white,),
                            )
                          ],
                        )),
                    Positioned(
                        bottom: 8.h,
                        left: 32.w,
                        right: 32.w,
                        child:  SizedBox(
                            height: 6.h,
                            child:
                            ListView.builder(
                              itemCount: 7,
                              scrollDirection: Axis.horizontal,
                              itemBuilder:(context, index) {

                                return
                                  Obx(() =>  InkWell(
                                    onTap: (){
                                      controller.indexSwiper.value = index;
                                    },
                                    child: Container(
                                      width: (Get.width-64.w-32.w-52.w)/7,
                                      margin: EdgeInsets.symmetric(horizontal: 4.w),
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(2),
                                          color:controller.indexSwiper.value == index? Colors.grey : Colors.white
                                      ),
                                    ),
                                  ));
                              },)))
                  ],
                ),
              )
          ),

          Visibility(
              visible: controller.isVisiableYt.value,
              child:
              SizedBox(
                width: double.infinity,
                height: MediaQuery.of(context).orientation == Orientation.landscape ?Get.height: 180.h,
                child:
                // Chewie(
                //    controller: controller.chewiwController,)
                YoutubePlayer(
                  width: double.infinity,
                  aspectRatio: 16/9,
                  controller: controller.youTubeController,
                  showVideoProgressIndicator: true,
                  progressIndicatorColor: Colors.blueAccent,
                ),
              )
          ),
          InkWell(
            onTap: (){
              controller.isVisiableYt.value =! controller.isVisiableYt.value;
              controller.isVisiablebackgroudYt.value= false;
            },
            child:  Visibility(
                visible: controller.isVisiablebackgroudYt.value,
                child:
                SizedBox(
                    width: double.infinity,
                    height: MediaQuery.of(context).orientation == Orientation.landscape ?Get.height: 180.h,
                    child:
                    Stack(
                      children: [
                        const CacheNetWorkCustom(urlImage:'https://static-images.vnncdn.net/files/publish/2023/4/24/mu-vs-man-city-500.jpg'),
                        Center(
                          child:  Image.network('https://upload.wikimedia.org/wikipedia/commons/e/ef/Youtube_logo.png', width: 60.w, height: 60.h,),
                        ),
                        Positioned(
                            top: 10,
                            right: 4,
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.black54,
                                  borderRadius: BorderRadius.circular(4)
                              ),
                              padding: EdgeInsets.all(2.w),
                              child: InkWell(
                                onTap: (){
                                  controller.isVisiablebackgroudYt.value = false;
                                },
                                child: const Icon(Icons.close, color: Colors.white,),
                              ),
                            ))
                      ],
                    )
                )
            ),
          ),

          SizedBox(height:  MediaQuery.of(context).orientation == Orientation.landscape? 0: 16.h),
          MediaQuery.of(context).orientation == Orientation.landscape ?
          controller.isVisiablebackgroudYt.value == true ||
              controller.isVisiableYt.value == true||
              controller.isVisiable.value==true? Container():
          Obx(() => Container(
            padding: const EdgeInsets.symmetric(vertical: 12),
            width: double.infinity,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.black12
            ),
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      flex:2,
                      child: InkWell(
                          onTap: () {
                            Get.toNamed(Routes.detailTeams);
                          },
                          child:
                          Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 24.w, height: 24.h,)
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: controller.itemArgument.value.status == 'FINISHED'?
                      Text('${controller.itemArgument.value.ftScore}',
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16.sp),
                      ) : Text(controller.outputTimeFormat.format(DateFormat('HH:mm:ss').parse('${controller.itemArgument.value.time}')),
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16.sp),
                      ),
                    ),
                    Expanded(
                      flex:2,
                      child: InkWell(
                          onTap: () {
                            Get.toNamed(Routes.detailTeams);
                          },
                          child: Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 24.w, height: 24.h,)
                      ),),

                  ],
                ),
                const SizedBox(height: 8,),
                Obx(() =>    Row(
                  children: [
                    Expanded(
                      flex:2,
                      child: InkWell(
                        onTap: () {
                          Get.toNamed(Routes.detailTeams);
                        },
                        child: Text(controller.itemArgument.value.home!.name!,textAlign: TextAlign.center,maxLines: 2, overflow: TextOverflow.ellipsis,  style:TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                      ),),
                    Expanded(
                      flex: 1,
                      child: controller.itemArgument.value.status == 'FINISHED'?
                      Text('Full Time',textAlign: TextAlign.center, style:TextStyle(color: Colors.grey, fontSize: 12.sp, fontWeight: FontWeight.w300),):
                      Text('Today',textAlign: TextAlign.center, style:TextStyle(color: Colors.grey, fontSize: 12.sp, fontWeight: FontWeight.w300),),
                    ),
                    Expanded(
                      flex:2,
                      child: InkWell(
                        onTap: () {
                          Get.toNamed(Routes.detailTeams);
                        },
                        child: Text(controller.itemArgument.value.away!.name!,textAlign: TextAlign.center, maxLines: 2, overflow: TextOverflow.ellipsis, style:TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                      ),),
                  ],
                )),
                const SizedBox(height: 16,),
                 controller.listPlayer2[0]['name']!.isNotEmpty ?
                 const SizedBox():
                 Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                        flex:2,
                        child: ListView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: controller.listPlayer2.length,
                            itemBuilder: (context, index){
                              return
                                SizedBox(
                                    width: 100.w,
                                    child:RichText(
                                      textAlign: TextAlign.end,
                                      text: TextSpan(
                                          children:[
                                            TextSpan(text: '${controller.listPlayer2[index]['name']}', style:TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 12.sp)),
                                            TextSpan(text: ' ${controller.listPlayer2[index]['time']}', style:TextStyle(color: Colors.grey, fontWeight: FontWeight.w500, fontSize: 12.sp)),

                                          ]
                                      ),
                                    )
                                );
                            })
                    ),
                    const Expanded(
                      flex: 1,
                      child: Icon(Icons.sports_soccer_outlined, color: Colors.white,),
                    ),
                    Expanded(
                      flex: 2,
                      child:  ListView.builder(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemCount: controller.listPlayer.length,
                          itemBuilder: (context, index){
                            return
                              SizedBox(
                                  width: 100.w,
                                  child:RichText(
                                    textAlign: TextAlign.start,
                                    text: TextSpan(
                                        children:[
                                          TextSpan(text: '${controller.listPlayer[index]['name']}', style:TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 12.sp)),
                                          TextSpan(text: ' ${controller.listPlayer[index]['time']}', style:TextStyle(color: Colors.grey, fontWeight: FontWeight.w500, fontSize: 12.sp)),

                                        ]
                                    ),
                                  )
                              );
                          }
                      ),
                    ),
                  ],
                ),
              ],
            ),
          )):
          Obx(() =>  Container(
            padding:  EdgeInsets.symmetric(vertical: 12.h),
            width: double.infinity,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.black12
            ),
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      flex:2,
                      child: InkWell(
                          onTap: () {
                            Get.toNamed(Routes.detailTeams);
                          },
                          child:
                          Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 24.w, height: 24.h,)
                      ),),
                    Expanded(
                      flex: 1,
                      child: controller.itemArgument.value.status == 'FINISHED'?
                      Text('${controller.itemArgument.value.ftScore}',
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16.sp),
                      ) : Text(DateFormat.Hm().format(DateTime.parse('${controller.itemArgument.value.date} ${controller.itemArgument.value.time!}')),
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16.sp),
                      ),
                    ),
                    Expanded(
                      flex:2,
                      child: InkWell(
                          onTap: () {
                            Get.toNamed(Routes.detailTeams);
                          },
                          child: Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 24.w, height: 24.h,)
                      ),),

                  ],
                ),
                SizedBox(height: 8.h,),
                Row(
                  children: [
                    Expanded(
                      flex:2,
                      child: InkWell(
                        onTap: () {
                          Get.toNamed(Routes.detailTeams);
                        },
                        child: Text(controller.itemArgument.value.home!.name!,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Text(controller.getMatchTimeText(),
                        textAlign: TextAlign.center,
                        style:TextStyle(
                            color: Colors.grey,
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w300),
                      ),
                    ),
                    Expanded(
                      flex:2,
                      child: InkWell(
                        onTap: () {
                          Get.toNamed(Routes.detailTeams);
                        },
                        child: Text(controller.itemArgument.value.away!.name!,textAlign: TextAlign.center, style:TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 16.h,),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                        flex:2,
                        child: ListView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: controller.listPlayer2.length,
                            itemBuilder: (context, index){
                              return SizedBox(
                                width: 100.w,
                                child:RichText(
                                  textAlign: TextAlign.end,
                                  text: TextSpan(
                                      children:[
                                        TextSpan(text: '${controller.listPlayer2[index]['name']}', style:TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 12.sp)),
                                        TextSpan(text: ' ${controller.listPlayer2[index]['time']}', style:TextStyle(color: Colors.grey, fontWeight: FontWeight.w500, fontSize: 12.sp)),
                                      ]
                                  ),
                                ),
                              );
                            })
                    ),
                    const Expanded(
                      flex: 1,
                      child: Icon(Icons.sports_soccer_outlined, color: Colors.white,),
                    ),
                    Expanded(
                        flex: 2,
                        child:  ListView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: controller.listPlayer.length,
                            itemBuilder: (context, index){
                              return
                                SizedBox(
                                    width: 100.w,
                                    child:RichText(
                                      textAlign: TextAlign.start,
                                      text: TextSpan(
                                          children:[
                                            TextSpan(text: '${controller.listPlayer[index]['name']}', style:TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 12.sp)),
                                            TextSpan(text: ' ${controller.listPlayer[index]['time']}', style:TextStyle(color: Colors.grey, fontWeight: FontWeight.w500, fontSize: 12.sp)),

                                          ]
                                      ),
                                    )
                                );
                            })
                    ),


                  ],
                ),


              ],
            ),
          )),


        ],
      ),
    ),);
  }
}

class MyDelegate extends SliverPersistentHeaderDelegate {
  final controller = Get.put(DetailMatchesRegionsController());
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Column(
      children: [
        MediaQuery.of(context).orientation == Orientation.landscape? controller.isVisiablebackgroudYt.value == true || controller.isVisiableYt.value == true||controller.isVisiable.value==true? const SizedBox():
        Container(
          decoration: const BoxDecoration(
              image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage("assets/images/background_app_betting.jpg")
              )
          ),
          height: 40.h,
          child: ListView.builder(
              itemCount: controller.listTitle.length,
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context,index){
                return GetBuilder<DetailMatchesRegionsController>(builder: (controller){
                  return TextButton(
                      onPressed: () {
                        controller.indexClick.value = index;
                        controller.pageController.animateToPage(index,
                            duration: const Duration(milliseconds: 500,),
                            curve: Curves.ease);
                        controller.update();
                      },
                      child: Obx(() => Text(
                        controller.listTitle[index],
                        style: TextStyle(
                            fontWeight: FontWeight.w500,
                            fontSize: 14.sp,
                            color: controller.indexClick.value == index
                                ? ColorUtils.PRIMARY_COLOR
                                : const Color.fromRGBO(177, 177, 177, 1)),
                      )));
                });
              }),
        ):
        Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage("assets/images/background_app_betting.jpg")
            )
          ),
          height: 40.h,
          child: ListView.builder(
              itemCount: controller.listTitle.length,
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context,index){
                return GetBuilder<DetailMatchesRegionsController>(builder: (controller){
                  return TextButton(
                      style: TextButton.styleFrom(
                        splashFactory: NoSplash.splashFactory,
                      ),
                      onPressed: () {
                        controller.indexClick.value = index;
                        controller.pageController.animateToPage(index,
                            duration: const Duration(milliseconds: 500,),
                            curve: Curves.ease);
                        controller.update();
                      },
                      child: Obx(() => Text(
                        controller.listTitle[index],
                        style: TextStyle(
                            fontWeight: FontWeight.w500,
                            fontSize: 14.sp,
                            color: controller.indexClick.value == index
                                ? ColorUtils.PRIMARY_COLOR
                                : const Color.fromRGBO(177, 177, 177, 1)),
                      )));
                });
              }),
        ),

      ],
    );
  }

  @override
  double get minExtent => 40.h;

  @override
  double get maxExtent => 40.h;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}