import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sefer_admin1/constant/style.dart';
import 'package:sefer_admin1/controller/admin/static_controller.dart';
import 'package:sefer_admin1/views/widgets/mycircular.dart';

import '../../../constant/colors.dart';
import '../../widgets/my_scafold.dart';

class StaticDash extends StatelessWidget {
  const StaticDash({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(StaticController());
    return MyScafolld(
        title: 'Static Dash'.tr,
        action: IconButton(
          onPressed: () async {
            await Get.put(StaticController()).getAll();
          },
          icon: const Icon(
            Icons.replay_circle_filled_rounded,
            color: AppColor.greenColor,
          ),
        ),
        body: [
          GetBuilder<StaticController>(builder: (staticController) {
            return staticController.isLoading
                ? const MyCircularProgressIndicator()
                : ListView(
                    children: [
                      SizedBox(
                          height: Get.height * .3,
                          width: double.maxFinite,
                          // decoration: AppStyle.boxDecoration1,
                          child: Padding(
                            padding: const EdgeInsets.all(6),
                            child: Container(
                              decoration: AppStyle.boxDecoration1,
                              height: MediaQuery.of(context).size.height * 0.4,
                              child: LineChart(
                                LineChartData(
                                  lineBarsData: [
                                    LineChartBarData(
                                      isStepLineChart: true,
                                      spots:
                                          staticController.chartDataPassengers,
                                      isCurved: true,
                                      color: Colors.blue, // Custom color
                                      barWidth: 3, // Thinner line
                                      dotData: const FlDotData(
                                          show:
                                              true), // Show dots on each point
                                      belowBarData: BarAreaData(
                                        show: true,
                                        color: Colors.deepPurpleAccent
                                            .withOpacity(
                                                0.3), // Custom gradient color
                                      ),
                                      isStrokeJoinRound: true,
                                      shadow: const BoxShadow(
                                        color: Colors.yellow,
                                        blurRadius: 4,
                                        offset: Offset(2, 2),
                                      ),
                                    ),
                                  ],
                                  showingTooltipIndicators: const [],
                                  titlesData: FlTitlesData(
                                    show: true,
                                    topTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Days'.tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                    ),
                                    bottomTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Total passengers on month ${staticController.totalMonthlyPassengers}'
                                            .tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                      sideTitles: const SideTitles(
                                        reservedSize: 30,
                                        showTitles: true,
                                      ),
                                    ),
                                    leftTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Counts of Passengers on days'.tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                      sideTitles: const SideTitles(
                                        reservedSize: 30,
                                        showTitles: true,
                                      ),
                                    ),
                                  ),
                                  gridData: const FlGridData(show: true),
                                  borderData: FlBorderData(
                                    show: true,
                                    border: const Border(
                                      bottom:
                                          BorderSide(color: Colors.blueAccent),
                                      left:
                                          BorderSide(color: Colors.blueAccent),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          )),
                      const SizedBox(
                        height: 5,
                      ),
                      SizedBox(
                          height: Get.height * .3,
                          width: double.maxFinite,
                          // decoration: AppStyle.boxDecoration1,
                          child: Padding(
                            padding: const EdgeInsets.all(6),
                            child: Container(
                              decoration: AppStyle.boxDecoration1,
                              height: MediaQuery.of(context).size.height * 0.4,
                              child: LineChart(
                                LineChartData(
                                  lineBarsData: [
                                    LineChartBarData(
                                      isStepLineChart: true,
                                      spots: staticController.chartDataDrivers,
                                      isCurved: true,
                                      color: Colors.blue, // Custom color
                                      barWidth: 3, // Thinner line
                                      dotData: const FlDotData(
                                          show:
                                              true), // Show dots on each point
                                      belowBarData: BarAreaData(
                                        show: true,
                                        color: Colors.deepPurpleAccent
                                            .withOpacity(
                                                0.3), // Custom gradient color
                                      ),
                                      isStrokeJoinRound: true,
                                      shadow: const BoxShadow(
                                        color: Colors.yellow,
                                        blurRadius: 4,
                                        offset: Offset(2, 2),
                                      ),
                                    ),
                                  ],
                                  showingTooltipIndicators: const [],
                                  titlesData: FlTitlesData(
                                    show: true,
                                    topTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Days'.tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                    ),
                                    bottomTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Total Drivers on month ${staticController.totalMonthlyDrivers}'
                                            .tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                      sideTitles: const SideTitles(
                                        reservedSize: 30,
                                        showTitles: true,
                                      ),
                                    ),
                                    leftTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Counts of Drivers on days'.tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                      sideTitles: const SideTitles(
                                        reservedSize: 30,
                                        showTitles: true,
                                      ),
                                    ),
                                  ),
                                  gridData: const FlGridData(show: true),
                                  borderData: FlBorderData(
                                    show: true,
                                    border: const Border(
                                      bottom:
                                          BorderSide(color: Colors.blueAccent),
                                      left:
                                          BorderSide(color: Colors.blueAccent),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          )),
                      const SizedBox(
                        height: 5,
                      ),
                      SizedBox(
                          height: Get.height * .3,
                          width: double.maxFinite,
                          // decoration: AppStyle.boxDecoration1,
                          child: Padding(
                            padding: const EdgeInsets.all(6),
                            child: Container(
                              decoration: AppStyle.boxDecoration1,
                              height: MediaQuery.of(context).size.height * 0.4,
                              child: LineChart(
                                LineChartData(
                                  lineBarsData: [
                                    LineChartBarData(
                                      isStepLineChart: true,
                                      spots: staticController.chartDataRides,
                                      isCurved: true,
                                      color: const Color.fromARGB(
                                          255, 84, 181, 182), // Custom color
                                      barWidth: 3, // Thinner line
                                      dotData: const FlDotData(
                                          show:
                                              true), // Show dots on each point
                                      belowBarData: BarAreaData(
                                        show: true,
                                        color: const Color.fromARGB(
                                                255, 65, 144, 86)
                                            .withOpacity(
                                                0.3), // Custom gradient color
                                      ),
                                      isStrokeJoinRound: true,
                                      shadow: const BoxShadow(
                                        color: Colors.yellow,
                                        blurRadius: 4,
                                        offset: Offset(2, 2),
                                      ),
                                    ),
                                  ],
                                  showingTooltipIndicators: const [],
                                  titlesData: FlTitlesData(
                                    show: true,
                                    topTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Days'.tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                    ),
                                    bottomTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Total Rides on month  ${staticController.totalMonthlyRides}'
                                            .tr,
                                        style: AppStyle.subtitle,
                                      ),
                                      axisNameSize: 30,
                                      sideTitles: const SideTitles(
                                        reservedSize: 30,
                                        showTitles: true,
                                      ),
                                    ),
                                    leftTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Counts of Rides on days'.tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                      sideTitles: const SideTitles(
                                        reservedSize: 30,
                                        showTitles: true,
                                      ),
                                    ),
                                  ),
                                  gridData: const FlGridData(show: true),
                                  borderData: FlBorderData(
                                    show: true,
                                    border: const Border(
                                      bottom:
                                          BorderSide(color: Colors.blueAccent),
                                      left:
                                          BorderSide(color: Colors.blueAccent),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          )),
                      const SizedBox(
                        height: 5,
                      ),
                      SizedBox(
                        height: Get.height * .3,
                        width: double.maxFinite,
                        child: Padding(
                          padding: const EdgeInsets.all(6),
                          child: Container(
                            decoration: AppStyle.boxDecoration1,
                            height: MediaQuery.of(context).size.height * 0.4,
                            child: LineChart(
                              LineChartData(
                                lineBarsData: [
                                  LineChartBarData(
                                    spots: staticController
                                        .chartDataEmployeeMaryam,
                                    isCurved: true,
                                    color:
                                        Colors.blue, // Custom color for Maryam
                                    barWidth: 3,
                                    dotData: const FlDotData(show: true),
                                    belowBarData: BarAreaData(
                                        show: true,
                                        color: Colors.blue.withOpacity(0.3)),
                                  ),
                                  LineChartBarData(
                                    spots:
                                        staticController.chartDataEmployeeRawda,
                                    isCurved: true,
                                    color: Colors.red, // Custom color for Rawda
                                    barWidth: 3,
                                    dotData: const FlDotData(show: true),
                                    belowBarData: BarAreaData(
                                        show: true,
                                        color: Colors.red.withOpacity(0.3)),
                                  ),
                                  LineChartBarData(
                                    spots:
                                        staticController.chartDataEmployeeMena,
                                    isCurved: true,
                                    color:
                                        Colors.green, // Custom color for Mena
                                    barWidth: 3,
                                    dotData: const FlDotData(show: true),
                                    belowBarData: BarAreaData(
                                        show: true,
                                        color: Colors.green.withOpacity(0.3)),
                                  ),
                                ],
                                titlesData: const FlTitlesData(
                                  bottomTitles: AxisTitles(
                                    sideTitles: SideTitles(showTitles: true),
                                  ),
                                  leftTitles: AxisTitles(
                                    sideTitles: SideTitles(showTitles: true),
                                  ),
                                ),
                                gridData: const FlGridData(show: true),
                                borderData: FlBorderData(show: true),
                              ),
                            ),
                          ),
                        ),
                      ),
                      // SizedBox(
                      //     height: Get.height * .3,
                      //     width: double.maxFinite,
                      //     // decoration: AppStyle.boxDecoration1,
                      //     child: Padding(
                      //       padding: const EdgeInsets.all(6),
                      //       child: Container(
                      //         decoration: AppStyle.boxDecoration1,
                      //         height: MediaQuery.of(context).size.height * 0.4,
                      //         child: LineChart(
                      //           LineChartData(
                      //             lineBarsData: [
                      //               LineChartBarData(
                      //                 isStepLineChart: true,
                      //                 spots: staticController
                      //                     .chartDataDriversCalling,
                      //                 isCurved: true,
                      //                 color: Colors
                      //                     .deepPurpleAccent, // Custom color
                      //                 barWidth: 3, // Thinner line
                      //                 dotData: const FlDotData(
                      //                     show:
                      //                         true), // Show dots on each point
                      //                 belowBarData: BarAreaData(
                      //                   show: true,
                      //                   color: Colors.deepPurpleAccent
                      //                       .withOpacity(
                      //                           0.3), // Custom gradient color
                      //                 ),
                      //                 isStrokeJoinRound: true,
                      //                 shadow: const BoxShadow(
                      //                   color: Colors.yellow,
                      //                   blurRadius: 4,
                      //                   offset: Offset(2, 2),
                      //                 ),
                      //               ),
                      //             ],
                      //             showingTooltipIndicators: const [],
                      //             titlesData: FlTitlesData(
                      //               show: true,
                      //               topTitles: AxisTitles(
                      //                 axisNameWidget: Text(
                      //                   'Days'.tr,
                      //                   style: const TextStyle(
                      //                       fontSize: 14,
                      //                       fontWeight: FontWeight.bold),
                      //                 ),
                      //                 axisNameSize: 30,
                      //               ),
                      //               bottomTitles: AxisTitles(
                      //                 axisNameWidget: Text(
                      //                   'Total Drivers on month are Calliing ${staticController.staticList[0]['totalMonthlyCallingDrivers']}'
                      //                       .tr,
                      //                   style: AppStyle.subtitle,
                      //                 ),
                      //                 axisNameSize: 30,
                      //                 sideTitles: const SideTitles(
                      //                   reservedSize: 30,
                      //                   showTitles: true,
                      //                 ),
                      //               ),
                      //               leftTitles: AxisTitles(
                      //                 axisNameWidget: Text(
                      //                   'Counts of Drivers on days'.tr,
                      //                   style: const TextStyle(
                      //                       fontSize: 14,
                      //                       fontWeight: FontWeight.bold),
                      //                 ),
                      //                 axisNameSize: 30,
                      //                 sideTitles: const SideTitles(
                      //                   reservedSize: 30,
                      //                   showTitles: true,
                      //                 ),
                      //               ),
                      //             ),
                      //             gridData: const FlGridData(show: true),
                      //             borderData: FlBorderData(
                      //               show: true,
                      //               border: const Border(
                      //                 bottom:
                      //                     BorderSide(color: Colors.blueAccent),
                      //                 left:
                      //                     BorderSide(color: Colors.blueAccent),
                      //               ),
                      //             ),
                      //           ),
                      //         ),
                      //       ),
                      //     )),
                      // const SizedBox(
                      //   height: 5,
                      // ),
                      SizedBox(
                          height: Get.height * .3,
                          width: double.maxFinite,
                          // decoration: AppStyle.boxDecoration1,
                          child: Padding(
                            padding: const EdgeInsets.all(6),
                            child: Container(
                              decoration: AppStyle.boxDecoration1,
                              height: MediaQuery.of(context).size.height * 0.4,
                              child: LineChart(
                                LineChartData(
                                  lineBarsData: [
                                    LineChartBarData(
                                      isStepLineChart: true,
                                      spots: staticController
                                          .chartDataDriversMatchingNotes,
                                      isCurved: true,
                                      color: Colors
                                          .deepPurpleAccent, // Custom color
                                      barWidth: 3, // Thinner line
                                      dotData: const FlDotData(
                                          show:
                                              true), // Show dots on each point
                                      belowBarData: BarAreaData(
                                        show: true,
                                        color: Colors.deepPurpleAccent
                                            .withOpacity(
                                                0.3), // Custom gradient color
                                      ),
                                      isStrokeJoinRound: true,
                                      shadow: const BoxShadow(
                                        color: Colors.yellow,
                                        blurRadius: 4,
                                        offset: Offset(2, 2),
                                      ),
                                    ),
                                  ],
                                  showingTooltipIndicators: const [],
                                  titlesData: FlTitlesData(
                                    show: true,
                                    topTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Days'.tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                    ),
                                    bottomTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Total Drivers on month are register after calling ${staticController.staticList[0]['totalMonthlyMatchingNotes']}'
                                            .tr,
                                        style: AppStyle.subtitle,
                                      ),
                                      axisNameSize: 30,
                                      sideTitles: const SideTitles(
                                        reservedSize: 30,
                                        showTitles: true,
                                      ),
                                    ),
                                    leftTitles: AxisTitles(
                                      axisNameWidget: Text(
                                        'Counts of Drivers on days'.tr,
                                        style: const TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      axisNameSize: 30,
                                      sideTitles: const SideTitles(
                                        reservedSize: 30,
                                        showTitles: true,
                                      ),
                                    ),
                                  ),
                                  gridData: const FlGridData(show: true),
                                  borderData: FlBorderData(
                                    show: true,
                                    border: const Border(
                                      bottom:
                                          BorderSide(color: Colors.blueAccent),
                                      left:
                                          BorderSide(color: Colors.blueAccent),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          )),
                      const SizedBox(
                        height: 5,
                      ),
                    ],
                  );
          })
        ],
        isleading: true);
  }
}