import 'package:betting/view/mobile/find/detail_matches_in_regions/statistical_matches/cards_matches_regions/cards_matches_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class CardsMatchesPage extends GetWidget<CardsMatchesController> {
  final controller = Get.put(CardsMatchesController());

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        width: double.infinity,
        color: const Color.fromRGBO(254, 254, 254, 1),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(
              height: 8.h,
            ),
            Text(
              'CARDS',
              style: TextStyle(
                  color: Colors.grey,
                  fontSize: 12.sp,
                  fontWeight: FontWeight.bold),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: (Get.width - 100.w) * 50 / 100,
                  height: 8.h,
                  color: Colors.black54,
                ),
                SizedBox(
                  width: 4.w,
                ),
                Expanded(
                    child: Container(
                  width: (Get.width - 100.w) * 50 / 100,
                  height: 8.h,
                  color: Colors.grey,
                )),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '84%',
                  style: TextStyle(
                      color: Colors.black54,
                      fontSize: 12.sp,
                      fontWeight: FontWeight.bold),
                ),
                Text(
                  '16%',
                  style: TextStyle(
                      color: Colors.grey,
                      fontSize: 12.sp,
                      fontWeight: FontWeight.bold),
                ),
              ],
            ),
           Expanded(child:  Center(
             child: SizedBox(
               height: 100.h,
               child: ListView.builder(
                 shrinkWrap: true,
                 scrollDirection: Axis.horizontal,
                 physics: const NeverScrollableScrollPhysics(),
                 itemCount: 3,
                 itemBuilder: (context, index) {
                   return Container(
                     margin: EdgeInsets.symmetric(horizontal: 4.w),
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.center,
                       children: [
                         Row(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
                             Text(
                               '15',
                               style: TextStyle(
                                   color: Colors.grey,
                                   fontSize: 10.sp,
                                   fontWeight: FontWeight.bold),
                             ),
                             Stack(
                               children: [
                                 Container(
                                   padding: EdgeInsets.zero,
                                   height: 40.w,
                                   width: 50.w,
                                   child: SfCircularChart(
                                     margin: EdgeInsets.zero,
                                     series: <CircularSeries>[
                                       DoughnutSeries<SalesData, String>(
                                         dataSource: controller.listchartData,
                                         xValueMapper: (SalesData data, _) =>
                                         data.salesPerson,
                                         yValueMapper: (SalesData data, _) =>
                                         data.sales,
                                         pointColorMapper:
                                             (SalesData data, _) => data.color,
                                         innerRadius: '80%',
                                       )
                                     ],
                                   ),
                                 ),
                                 Positioned(
                                     top: 10.h,
                                     bottom: 10.h,
                                     left: 12.h,
                                     right: 12.h,
                                     child: Container(
                                       decoration: BoxDecoration(
                                         borderRadius: BorderRadius.circular(50),
                                         image:  DecorationImage(
                                           fit: BoxFit.fill,
                                           image: AssetImage(
                                               index == 0?
                                               "assets/images/shot2.png":
                                               index == 1?
                                               "assets/images/shot3.png":
                                               "assets/images/sho4.png"
                                           )
                                         )
                                       ),
                                     ))
                               ],
                             ),
                             Text(
                               '15',
                               style: TextStyle(
                                   color: Colors.grey,
                                   fontSize: 10.sp,
                                   fontWeight: FontWeight.bold),
                             ),
                           ],
                         ),
                         Text(
                           'FOULS',
                           style: TextStyle(
                               color: Colors.grey,
                               fontSize: 12.sp,
                               fontWeight: FontWeight.w500),
                         ),
                       ],
                     ),
                   );
                 },
               ),
             ),
           )),
           
          ],
        ),
      ),
    );
  }
}
