import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:double_back_to_close_app/double_back_to_close_app.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

import 'package:get/get.dart';
import 'package:IQ/app/global/converted_bytes.dart';
import 'package:IQ/app/global/global_snackbar.dart';
import 'package:IQ/app/global/static_informs.dart';
import 'package:IQ/app/global/single_box.dart';
import 'package:IQ/app/global/single_card.dart';
import 'package:IQ/app/global/text_widget.dart';
import 'package:IQ/app/modules/drawerSide/views/drawer_side_view.dart';
import 'package:IQ/app/modules/home/providers/notifications.dart';
import 'package:IQ/app/modules/home/providers/user.dart';
import 'package:IQ/app/modules/home/widgets/shimmer_icon.dart';
import 'package:IQ/app/modules/home/widgets/shimmer_text.dart';
import 'package:IQ/app/modules/home/widgets/shimmer_text_widget.dart';
import 'package:IQ/app/routes/app_pages.dart';
import 'package:shimmer/shimmer.dart';

import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  HomeView({Key? key}) : super(key: key);
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();

  String formatBytesForRemainingTraffic(int bytes, int decimals) {
    if (bytes <= 0) return "0 B";
    const suffixes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
    var i = (log(bytes) / log(1024)).floor();
    return suffixes[i] +
        ' ' +
        ((bytes / pow(1024, i)).toStringAsFixed(decimals));
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection:
          defaultLocale != "en" ? TextDirection.ltr : TextDirection.rtl,
      child: Scaffold(
        backgroundColor: backgroundColor,
        drawerScrimColor: Colors.black.withOpacity(0.7),
        key: scaffoldKey,
        endDrawer: const DrawerSideView(),
        drawerEdgeDragWidth: widthSize(context),
        body: DoubleBackToCloseApp(
          snackBar: snackBar,
          child: GetBuilder(
            builder: (HomeController homeController) {
              return RefreshIndicator(
                onRefresh: controller.onRefresh,
                triggerMode: RefreshIndicatorTriggerMode.anywhere,
                backgroundColor: Colors.white,
                color: brandColor,
                child: homeController.fetchHomeData
                    ? Stack(
                        children: [
                          SingleChildScrollView(
                            physics: const AlwaysScrollableScrollPhysics(),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                const SizedBox(height: 270),
                                GetBuilder<HomeController>(
                                  builder: (c) {
                                    return Column(
                                      children: [
                                        SizedBox(
                                          child: CarouselSlider(
                                            options: CarouselOptions(
                                              height: 200,
                                              viewportFraction: 1.0,
                                              enableInfiniteScroll: true,
                                              autoPlay: true,
                                              autoPlayAnimationDuration:
                                                  const Duration(
                                                      milliseconds: 200),
                                              scrollPhysics:
                                                  const AlwaysScrollableScrollPhysics(),
                                              onPageChanged: c.onPageChanged,
                                            ),
                                            items: c.slidersImages.map((image) {
                                              return Builder(
                                                builder:
                                                    (BuildContext context) {
                                                  return Container(
                                                    margin: const EdgeInsets
                                                        .symmetric(
                                                      horizontal: 15,
                                                    ),
                                                    width:
                                                        MediaQuery.of(context)
                                                                .size
                                                                .width -
                                                            18,
                                                    decoration: BoxDecoration(
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              10),
                                                    ),
                                                    child: ClipRRect(
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              10),
                                                      child: CachedNetworkImage(
                                                        imageUrl: image,
                                                        fit: BoxFit.fill,
                                                        placeholder: (_, __) =>
                                                            Image.asset(
                                                          "assets/placeholder.png",
                                                        ),
                                                      ),
                                                    ),
                                                  );
                                                },
                                              );
                                            }).toList(),
                                          ),
                                        ),
                                        const SizedBox(height: 8),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: List<Widget>.generate(
                                              c.slidersImages.length,
                                              (int index) {
                                            return Container(
                                              width: 8.0,
                                              height: 8.0,
                                              margin:
                                                  const EdgeInsets.symmetric(
                                                horizontal: 6,
                                              ),
                                              decoration: BoxDecoration(
                                                shape: BoxShape.rectangle,
                                                color: c.current == index
                                                    ? const Color(0xff503296)
                                                    : const Color(0xffCACFEA),
                                              ),
                                            );
                                          }),
                                        )

                                        // Row(
                                        //   mainAxisAlignment:
                                        //       MainAxisAlignment.center,
                                        //   children: c.slidersImages.map((url) {
                                        //     int index =
                                        //         c.slidersImages.indexOf(url);
                                        //     print(
                                        //         "Building indicator with index $index and current ${c.current}");
                                        //     return Container(
                                        //       width: 8.0,
                                        //       height: 8.0,
                                        //       margin:
                                        //           const EdgeInsets.symmetric(
                                        //         horizontal: 6,
                                        //       ),
                                        //       decoration: BoxDecoration(
                                        //         shape: BoxShape.rectangle,
                                        //         color: c.current == index
                                        //             ? const Color(0xff503296)
                                        //             : const Color(0xffCACFEA),
                                        //       ),
                                        //     );
                                        //   }).toList(),
                                        // ),
                                      ],
                                    );
                                  },
                                ),
                                const SizedBox(height: 20),
                                Container(
                                  height: 150,
                                  margin: const EdgeInsets.symmetric(
                                      horizontal: 15),
                                  decoration: BoxDecoration(
                                    borderRadius: const BorderRadius.all(
                                      Radius.circular(20),
                                    ),
                                    color: Colors.white,
                                    border: Border.all(
                                      color: borderColor,
                                      width: 2,
                                    ),
                                  ),
                                  child: Column(
                                    children: [
                                      const SizedBox(height: 30),
                                      Container(
                                        margin: const EdgeInsets.only(
                                          top: 10,
                                          right: 15,
                                          left: 15,
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceEvenly,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Column(
                                              children: [
                                                Stack(
                                                  alignment: Alignment.center,
                                                  children: [
                                                    SvgPicture.asset(
                                                      controller.remainingIcon,
                                                      height: 60,
                                                      width: 60,
                                                    ),
                                                    Container(
                                                      margin:
                                                          const EdgeInsets.only(
                                                              top: 10),
                                                      child: TextWidget(
                                                        text: controller
                                                            .remainingDays,
                                                        fontSize: 18,
                                                        fontWeight:
                                                            FontWeight.bold,
                                                        color: controller
                                                                    .remainingDays ==
                                                                '!'
                                                            ? Colors.red
                                                            : Colors.black,
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                                const SizedBox(height: 5),
                                                TextWidget(
                                                  fontSize: 16,
                                                  text: 'remaining_days'.tr,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                              ],
                                            ),
                                            Container(
                                              padding:
                                                  const EdgeInsets.symmetric(
                                                horizontal: 40,
                                              ),
                                              decoration: BoxDecoration(
                                                border: Border(
                                                  left: BorderSide(
                                                    color: Colors.grey
                                                        .withOpacity(0.3),
                                                    width: 1,
                                                  ),
                                                  right: BorderSide(
                                                    color: Colors.grey
                                                        .withOpacity(0.3),
                                                    width: 1,
                                                  ),
                                                ),
                                              ),
                                              child: SingleBox(
                                                text: controller.connectionIcon,
                                                text2: controller
                                                    .connectionStatusText,
                                              ),
                                            ),
                                            SingleBox(
                                              text: controller.activiationIcon,
                                              text2: controller
                                                  .activiationStatusText,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                const SizedBox(height: 20),
                                Column(
                                  children: [
                                    Container(
                                      margin: const EdgeInsets.symmetric(
                                          horizontal: 35),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Container(),
                                          TextWidget(
                                            text: 'account_information'.tr,
                                            fontSize: 23,
                                            fontWeight: FontWeight.w500,
                                            color: brandColor,
                                          ),
                                        ],
                                      ),
                                    ),
                                    Container(
                                      margin: const EdgeInsets.symmetric(
                                          horizontal: 15, vertical: 10),
                                      padding: const EdgeInsets.symmetric(
                                        vertical: 10,
                                        horizontal: 25,
                                      ),
                                      decoration: BoxDecoration(
                                        borderRadius: const BorderRadius.all(
                                          Radius.circular(20),
                                        ),
                                        color: Colors.white,
                                        border: Border.all(
                                          color: borderColor,
                                          width: 2,
                                        ),
                                      ),
                                      child: Column(
                                        children: [
                                          SingleCard(
                                            text: controller.loginName,
                                            text2: 'username'.tr,
                                          ),
                                          SingleCard(
                                            text: controller.fullName,
                                            text2: 'fullname'.tr,
                                          ),
                                          SingleCard(
                                            text: controller.subscriptionPrice,
                                            text2: 'subscription_price'.tr,
                                          ),
                                          SingleCard(
                                            text: controller.expireDate,
                                            text2: 'subscription_expire'.tr,
                                          ),
                                          controller.remainingTraffic != null
                                              ? Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.end,
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.end,
                                                  children: [
                                                    Directionality(
                                                      textDirection:
                                                          defaultLocale == "en"
                                                              ? TextDirection
                                                                  .ltr
                                                              : TextDirection
                                                                  .rtl,
                                                      child: TextWidget(
                                                        text: formatBytes(
                                                            controller
                                                                    .remainingTraffic ??
                                                                0,
                                                            0),
                                                        fontSize: 20,
                                                        fontWeight:
                                                            FontWeight.w400,
                                                        color: brandColor,
                                                      ),
                                                    ),
                                                    TextWidget(
                                                      text: 'remaining_traffic'
                                                          .tr,
                                                      fontWeight:
                                                          FontWeight.w400,
                                                      fontSize: 16,
                                                      color: Colors.grey,
                                                    ),
                                                    Container(
                                                      margin: const EdgeInsets
                                                          .symmetric(
                                                        horizontal: 10,
                                                      ),
                                                      child: const Divider(),
                                                    ),
                                                  ],
                                                )
                                              : Container(),
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Container(),
                                              Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.end,
                                                // mainAxisAlignment: MainAxisAlignment.start,
                                                children: [
                                                  TextWidget(
                                                    text: controller
                                                        .availableBalance,
                                                    fontSize: 20,
                                                    fontWeight: FontWeight.w400,
                                                    color: brandColor,
                                                  ),
                                                  TextWidget(
                                                    text:
                                                        'available_balance'.tr,
                                                    fontWeight: FontWeight.w400,
                                                    fontSize: 16,
                                                    color: Colors.grey,
                                                  ),
                                                ],
                                              ),
                                            ],
                                          )
                                        ],
                                      ),
                                    ),
                                    Container(
                                      margin: const EdgeInsets.only(
                                        right: 35,
                                        left: 35,
                                        top: 20,
                                      ),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Container(),
                                          TextWidget(
                                            text: 'home_notifs'.tr,
                                            fontSize: 23,
                                            fontWeight: FontWeight.w500,
                                            color: brandColor,
                                          ),
                                        ],
                                      ),
                                    ),
                                    Container(
                                      margin: const EdgeInsets.symmetric(
                                          horizontal: 15, vertical: 10),
                                      decoration: BoxDecoration(
                                        borderRadius: const BorderRadius.all(
                                          Radius.circular(20),
                                        ),
                                        border: Border.all(
                                          color: borderColor,
                                          width: 2,
                                        ),
                                        color: Colors.white,
                                      ),
                                      // ignore: prefer_is_empty
                                      child: notifications?.data?.length != 0
                                          ? Column(
                                              children: notifications?.data
                                                      ?.map((e) {
                                                    return Column(
                                                      children: [
                                                        TextButton(
                                                          onPressed: () => Get
                                                              .offNamed(Routes
                                                                  .NOTIFICATIONS_SCREEN),
                                                          child: ListTile(
                                                            trailing: SvgPicture
                                                                .asset(
                                                              'assets/help_icon.svg',
                                                              height: 35,
                                                              width: 35,
                                                            ),
                                                            title: Container(
                                                              margin:
                                                                  const EdgeInsets
                                                                      .only(
                                                                top: 5,
                                                              ),
                                                              child: TextWidget(
                                                                text: e.subject,
                                                                fontSize: 16,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                                textAlign:
                                                                    TextAlign
                                                                        .right,
                                                                softWrap: false,
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w400,
                                                                color:
                                                                    brandColor,
                                                              ),
                                                            ),
                                                            subtitle:
                                                                TextWidget(
                                                              text: e.message,
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w400,
                                                              textAlign:
                                                                  TextAlign
                                                                      .right,
                                                              fontSize: 14,
                                                              color:
                                                                  Colors.grey,
                                                            ),
                                                            leading: const Icon(
                                                              Icons
                                                                  .arrow_back_ios,
                                                              size: 35,
                                                            ),
                                                          ),
                                                        ),
                                                        // ignore: prefer_is_empty
                                                        (controller.listOfNotification
                                                                    ?.length !=
                                                                0)
                                                            ? controller.listOfNotification
                                                                        ?.last !=
                                                                    e
                                                                ? Container(
                                                                    margin: const EdgeInsets
                                                                        .symmetric(
                                                                      horizontal:
                                                                          10,
                                                                    ),
                                                                    child:
                                                                        const Divider(),
                                                                  )
                                                                : Container()
                                                            : Container(),
                                                      ],
                                                    );
                                                  }).toList() ??
                                                  [],
                                            )
                                          : Container(
                                              // margin: ,
                                              padding: const EdgeInsets.all(15),
                                              child: Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceEvenly,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Container(),
                                                  TextWidget(
                                                    text:
                                                        "empty_home_notifs".tr,
                                                    fontSize: 20,
                                                    fontWeight: FontWeight.w400,
                                                    color:
                                                        const Color(0xff484848),
                                                  ),
                                                  SvgPicture.asset(
                                                    "assets/notifs.svg",
                                                    height: 50,
                                                    width: 50,
                                                  ),
                                                ],
                                              ),
                                            ),
                                    ),
                                  ],
                                ),
                                const SizedBox(height: 100),
                              ],
                            ),
                          ),
                          Container(
                            height: 250,
                            decoration: BoxDecoration(
                              color: brandColor,
                              image: const DecorationImage(
                                image: AssetImage('assets/background.png'),
                                fit: BoxFit.fill,
                              ),
                            ),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                SizedBox(
                                  height:
                                      MediaQuery.of(context).viewPadding.top,
                                ),
                                Container(
                                  margin: const EdgeInsets.symmetric(
                                    horizontal: 15,
                                  ),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(
                                        margin: const EdgeInsets.only(
                                          top: 5,
                                          right: 15,
                                        ),
                                        child: Row(
                                          children: [
                                            SvgPicture.asset(
                                              "assets/2/icon.svg",
                                              height: 20,
                                              width: 71.16,
                                            ),
                                            const SizedBox(width: 10),
                                            Image.asset("assets/logo.png"),
                                          ],
                                        ),
                                      ),
                                      const SizedBox(width: 10),
                                      Row(
                                        children: [
                                          Text(
                                            user?.data?.firstname ?? ' . . . ',
                                            style: const TextStyle(
                                              fontSize: 20,
                                              color: Colors.white,
                                              fontWeight: FontWeight.normal,
                                            ),
                                          ),
                                          IconButton(
                                            onPressed: () {
                                              scaffoldKey.currentState
                                                  ?.openEndDrawer();
                                            },
                                            icon: const Icon(
                                              Icons.menu,
                                              color: Colors.white,
                                              size: 40,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.symmetric(
                                      horizontal: 20),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    children: [
                                      TextWidget(
                                        text: 'subscription_type'.tr,
                                        color: Colors.white,
                                        fontSize: 18,
                                        fontWeight: FontWeight.w300,
                                        textAlign: TextAlign.start,
                                      ),
                                      const SizedBox(height: 5),
                                      TextWidget(
                                        text:
                                            controller.profileName ?? ' . . . ',
                                        color: Colors.white,
                                        fontSize: 32,
                                        fontWeight: FontWeight.bold,
                                        textAlign: TextAlign.start,
                                      ),
                                    ],
                                  ),
                                ),
                                const SizedBox(height: 5),
                              ],
                            ),
                          ),
                        ],
                      )
                    : Stack(
                        children: [
                          SingleChildScrollView(
                            physics: const AlwaysScrollableScrollPhysics(),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                const SizedBox(height: 250),
                                Container(
                                  height: 150,
                                  margin: const EdgeInsets.symmetric(
                                      horizontal: 15),
                                  decoration: BoxDecoration(
                                    borderRadius: const BorderRadius.all(
                                      Radius.circular(20),
                                    ),
                                    color: Colors.white,
                                    border: Border.all(
                                      color: borderColor,
                                      width: 2,
                                    ),
                                  ),
                                  child: Column(
                                    children: [
                                      const SizedBox(height: 30),
                                      Shimmer.fromColors(
                                        baseColor: Colors.grey.withOpacity(0.3),
                                        highlightColor: Colors.white,
                                        enabled: true,
                                        child: Container(
                                          margin: const EdgeInsets.only(
                                            top: 10,
                                            right: 15,
                                            left: 15,
                                          ),
                                          child: const Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              ShiimerIcon(),
                                              ShiimerIcon(),
                                              ShiimerIcon(),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                const SizedBox(height: 20),
                                Column(
                                  children: [
                                    Align(
                                      alignment: Alignment.centerRight,
                                      child: Container(
                                        margin: const EdgeInsets.symmetric(
                                            horizontal: 15, vertical: 10),
                                        child: Shimmer.fromColors(
                                          baseColor:
                                              Colors.grey.withOpacity(0.3),
                                          highlightColor: Colors.white,
                                          enabled: true,
                                          child: const ShimmerText(),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      margin: const EdgeInsets.symmetric(
                                        horizontal: 15,
                                        vertical: 10,
                                      ),
                                      padding: const EdgeInsets.symmetric(
                                        vertical: 10,
                                        horizontal: 25,
                                      ),
                                      width: MediaQuery.of(context).size.width,
                                      decoration: BoxDecoration(
                                        borderRadius: const BorderRadius.all(
                                          Radius.circular(20),
                                        ),
                                        color: Colors.white,
                                        border: Border.all(
                                          color: borderColor,
                                          width: 2,
                                        ),
                                      ),
                                      child: Column(
                                        children: [
                                          const ShimmerTextWidget(),
                                          const ShimmerTextWidget(),
                                          const ShimmerTextWidget(),
                                          const ShimmerTextWidget(),
                                          Align(
                                            alignment: Alignment.centerRight,
                                            child: Column(
                                              children: [
                                                Shimmer.fromColors(
                                                  baseColor: Colors.grey
                                                      .withOpacity(0.3),
                                                  highlightColor: Colors.white,
                                                  enabled: true,
                                                  child: const ShimmerText(),
                                                ),
                                                const SizedBox(height: 5),
                                                Shimmer.fromColors(
                                                  baseColor: Colors.grey
                                                      .withOpacity(0.3),
                                                  highlightColor: Colors.white,
                                                  enabled: true,
                                                  child: const ShimmerText(),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    // ignore: prefer_is_empty
                                    Align(
                                      alignment: Alignment.centerRight,
                                      child: Container(
                                        margin: const EdgeInsets.symmetric(
                                            horizontal: 15, vertical: 10),
                                        child: Shimmer.fromColors(
                                          baseColor:
                                              Colors.grey.withOpacity(0.3),
                                          highlightColor: Colors.white,
                                          enabled: true,
                                          child: const ShimmerText(),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      margin: const EdgeInsets.symmetric(
                                          horizontal: 15, vertical: 10),
                                      decoration: BoxDecoration(
                                        borderRadius: const BorderRadius.all(
                                          Radius.circular(20),
                                        ),
                                        border: Border.all(
                                          color: borderColor,
                                          width: 2,
                                        ),
                                        color: Colors.white,
                                      ),
                                      child: Column(
                                        children: notifications?.data?.map((e) {
                                              return Column(
                                                children: [
                                                  TextButton(
                                                    onPressed: () {},
                                                    child: ListTile(
                                                      title: Align(
                                                        alignment: Alignment
                                                            .centerRight,
                                                        child:
                                                            Shimmer.fromColors(
                                                          baseColor: Colors.grey
                                                              .withOpacity(0.3),
                                                          highlightColor:
                                                              Colors.white,
                                                          enabled: true,
                                                          child: Container(
                                                            height: 6,
                                                            width: 300,
                                                            decoration:
                                                                const BoxDecoration(
                                                              color:
                                                                  Colors.grey,
                                                              shape: BoxShape
                                                                  .rectangle,
                                                            ),
                                                          ),
                                                        ),
                                                      ),
                                                      subtitle: Align(
                                                        alignment: Alignment
                                                            .centerRight,
                                                        child:
                                                            Shimmer.fromColors(
                                                          baseColor: Colors.grey
                                                              .withOpacity(0.3),
                                                          highlightColor:
                                                              Colors.white,
                                                          enabled: true,
                                                          child: Container(
                                                            height: 6,
                                                            width: 150,
                                                            decoration:
                                                                const BoxDecoration(
                                                              color:
                                                                  Colors.grey,
                                                              shape: BoxShape
                                                                  .rectangle,
                                                            ),
                                                          ),
                                                        ),
                                                      ),
                                                    ),
                                                  ),
                                                  if (controller
                                                          .listOfNotification
                                                          ?.last !=
                                                      e)
                                                    Container(
                                                      margin: const EdgeInsets
                                                          .symmetric(
                                                        horizontal: 10,
                                                      ),
                                                      child: const Divider(),
                                                    ),
                                                ],
                                              );
                                            }).toList() ??
                                            [],
                                      ),
                                    ),
                                  ],
                                ),
                                const SizedBox(height: 100),
                              ],
                            ),
                          ),
                          Container(
                            height: 230,
                            decoration: BoxDecoration(
                              color: brandColor,
                              image: const DecorationImage(
                                image: AssetImage('assets/background.png'),
                                fit: BoxFit.fill,
                              ),
                            ),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                SizedBox(
                                    height:
                                        MediaQuery.of(context).viewPadding.top),
                                Container(
                                  margin: const EdgeInsets.only(right: 10),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      Container(
                                        margin: const EdgeInsets.only(
                                            top: 5, right: 15),
                                        child: Row(
                                          children: [
                                            Text(
                                              user?.data?.firstname ??
                                                  ' . . . ',
                                              style: const TextStyle(
                                                fontSize: 22,
                                                color: Colors.white,
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      const SizedBox(width: 10),
                                      IconButton(
                                        onPressed: () {
                                          scaffoldKey.currentState
                                              ?.openEndDrawer();
                                        },
                                        icon: const Icon(
                                          Icons.menu,
                                          color: Colors.white,
                                          size: 40,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Column(
                                  children: [
                                    TextWidget(
                                      text: 'subscription_type'.tr,
                                      color: Colors.white,
                                      fontSize: 20,
                                      fontWeight: FontWeight.w300,
                                      textAlign: TextAlign.center,
                                    ),
                                    const SizedBox(height: 5),
                                    TextWidget(
                                      text: controller.profileName,
                                      color: Colors.white,
                                      fontSize: 34,
                                      fontWeight: FontWeight.bold,
                                      textAlign: TextAlign.center,
                                    ),
                                  ],
                                ),
                                const SizedBox(height: 5),
                              ],
                            ),
                          ),
                        ],
                      ),
              );
            },
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        floatingActionButton: GetBuilder<HomeController>(
          builder: (homeController) {
            return homeController.fetchHomeData
                ? Container(
                    width: widthSize(context),
                    height: 60,
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          Color(0xFF4009C0),
                          Color(0xFF8C5EF6)
                        ], // Gradient colors
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                    ),
                    margin: const EdgeInsets.symmetric(
                        horizontal: 15, vertical: 29),
                    child: TextButton(
                      onPressed: () {
                        Get.toNamed(Routes.FILL_CARD);
                      },
                      child: GetBuilder(
                        builder: (HomeController c) {
                          return TextWidget(
                            text: controller.floatButtonActivation,
                            fontSize: 18,
                            fontWeight: FontWeight.normal,
                            color: Colors.white,
                          );
                        },
                      ),
                    ),
                  )
                : Container();
          },
        ),
      ),
    );
  }
}
