import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'ball_posession_controller.dart';

class BallPossessionPage extends GetWidget<BallPossessionController>{
  final controller = Get.put(BallPossessionController());

  @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(
          children: [
            SizedBox(height: 8.h,),
            Text('BALL POSSESSION', 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,
                )),
              ],
            ),
            SizedBox(height: 2.h,),
            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),),
              ],
            ),
            SizedBox(height: 16.h,),

          ListView.builder(
            shrinkWrap: true,
            itemCount: controller.list.length,
            itemBuilder: (context, index) {
            return Column(
              children: [
                SizedBox(height: 2.h,),
                Row(
                  children: [
                    Text('${controller.list[index]['num1']}%', style:  TextStyle(color: Colors.black54, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                    Expanded(child: Text('${controller.list[index]['name']}',textAlign: TextAlign.center,style:  TextStyle(color: Colors.grey, fontSize: 12.sp, fontWeight: FontWeight.w400),),),
                    Text('${controller.list[index]['num2']}%', style:  TextStyle(color: Colors.grey, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                  ],
                ),
                SizedBox(height: 2.h,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: (Get.width-100.w)*(int.parse('${controller.list[index]['num1']}')/(int.parse('${controller.list[index]['num1']}')+ int.parse('${controller.list[index]['num2']}'))),
                      height: 3.h,
                      color: Colors.black54,
                    ),
                    SizedBox(width: 4.w,),
                    Expanded(child: Container(
                      width: (Get.width-100.w)*(int.parse('${controller.list[index]['num2']}')/(int.parse('${controller.list[index]['num1']}')+ int.parse('${controller.list[index]['num2']}'))),
                      height: 3.h,
                      color: Colors.grey,
                    )),
                  ],
                ),
              ],
            );
          },)





          ],
        ),
      ),
    );
  }
}