cims_apps/lib/application/component/subscribe/total_payment_view.dart

import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/number_formatter.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view/step_subscribe/payment_method_view.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view_model/product_view_model.dart';
import 'package:flutter/material.dart';

class TotalPaymentView extends StatefulWidget {
  final int totalInvest;
  final List<Product> listProduct;
  const TotalPaymentView({
    super.key,
    required this.listProduct,
    required this.totalInvest,
  });

  @override
  State<TotalPaymentView> createState() => _TotalPaymentViewState();
}

class _TotalPaymentViewState extends State<TotalPaymentView> {
  bool isAgreement = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16)
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Padding(
            padding: const EdgeInsets.all(24.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text('Your Investment Today',
                  style: TextStyle(
                      color: ColorPalette.slate800,
                      fontWeight: FontWeight.w600,
                      fontSize: 16
                  ),
                ),
                GestureDetector(
                    onTap: () => Navigator.pop(context),
                    child: const Icon(Icons.close_rounded)
                )
              ],
            ),
          ),
          ...widget.listProduct.asMap().entries.map((e) {
            return Container(
              padding: const EdgeInsets.only(left: 16, right: 24, bottom: 16, top: 16),
              decoration: BoxDecoration(
                  border: Border(
                      left: BorderSide(
                        width: 8,
                        color: ColorPalette.investTypeColor[e.value.type]!
                      )
                  )
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                      flex: 5,
                      child: Text(e.value.name ?? '',
                        style: const TextStyle(
                            color: ColorPalette.slate400,
                            fontWeight: FontWeight.w600,
                            fontSize: 16
                        ),
                      )
                  ),
                  Expanded(
                      flex: 7,
                      child: Text(
                        NumberFormatter.numberCurrency(widget.totalInvest * e.value.totalPercent!, 'Rp ', 'id_ID'),
                        textAlign: TextAlign.end,
                        style: const TextStyle(
                            fontWeight: FontWeight.w700,
                            fontSize: 18,
                            color: ColorPalette.slate800
                        ),
                      )
                  )
                ],
              ),
            );
          }).toList(),
          const SizedBox(height: 16),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 24),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('Purchase Commission',
                  style: TextStyle(
                      color: ColorPalette.slate400,
                      fontWeight: FontWeight.w600,
                      fontSize: 16
                  ),
                ),
                Text('Free',
                  style: TextStyle(
                      color: ColorPalette.primary,
                      fontSize: 18,
                      fontWeight: FontWeight.w700
                  ),
                )
              ],
            ),
          ),
          const SizedBox(height: 16,),
          Container(
            color: ColorPalette.slate200.withOpacity(0.5),
            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text('Total',
                  style: TextStyle(
                      color: ColorPalette.slate400,
                      fontWeight: FontWeight.w600,
                      fontSize: 16
                  ),
                ),
                Text(NumberFormatter.numberCurrency(widget.totalInvest, 'Rp ', 'id_ID'),
                  textAlign: TextAlign.end,
                  style: const TextStyle(
                      fontWeight: FontWeight.w700,
                      fontSize: 18,
                      color: ColorPalette.slate800
                  ),
                )
              ],
            ),
          ),
          buttonAgreement(),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text('Total Payment',
                  style: TextStyle(
                      color: ColorPalette.slate400,
                      fontWeight: FontWeight.w600,
                      fontSize: 16
                  ),
                ),
                Text(NumberFormatter.numberCurrency(widget.totalInvest, 'Rp ', 'id_ID'),
                  textAlign: TextAlign.end,
                  style: const TextStyle(
                      fontWeight: FontWeight.w700,
                      fontSize: 18,
                      color: ColorPalette.slate800
                  ),
                )
              ],
            ),
          ),
          ButtonView(
            disabled: !isAgreement,
            name: 'Subscribe Now',
            onPressed: () {
              routePush(context, page: PaymentMethodView(
                totalInvest: widget.totalInvest,
              ));
            },
            disabledBgColor: ColorPalette.slate200.withOpacity(0.5),
            textColor: isAgreement ? Colors.white : ColorPalette.slate400,
            textWeight: FontWeight.w700,
            textSize: 20,
            backgroundColor: ColorPalette.primary,
          )
        ],
      ),
    );
  }

  Widget buttonAgreement() {
    bool isAgree = isAgreement;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                isAgreement = !isAgreement;
              });
            },
            child: AnimatedContainer(
              margin: const EdgeInsets.only(top: 4),
              duration: const Duration(milliseconds: 200),
              height: 16,
              width: 16,
              padding: const EdgeInsets.all(1),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(
                      color: isAgree ? ColorPalette.primary : ColorPalette.slate200
                  )
              ),
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 200),
                child: Container(
                  decoration: BoxDecoration(
                      color: isAgree ? ColorPalette.primary : ColorPalette.white,
                      shape: BoxShape.circle
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(width: 12,),
          Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('I agree to buy the mutual fund on this page and have read and agreed to all the contents of the Prospectus and summary information and understand the risks of my investment decision.',
                    style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                        color: ColorPalette.slate400
                    ),
                  ),
                  GestureDetector(
                      onTap: () {

                      },
                      child: const Text('Read More',
                        style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                            decoration: TextDecoration.underline,
                            color: ColorPalette.primary
                        ),
                      )
                  )
                ],
              )
          )
        ],
      ),
    );
  }
}