apskel-pos-flutter/lib/presentation/home/pages/home_page.dart

// ignore_for_file: public_member_api_docs, sort_constructors_first
import 'package:enaklo_pos/presentation/home/widgets/home_right_title.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
import 'package:enaklo_pos/core/extensions/int_ext.dart';
import 'package:enaklo_pos/core/extensions/string_ext.dart';
import 'package:enaklo_pos/data/models/response/table_model.dart';
import 'package:enaklo_pos/presentation/home/bloc/local_product/local_product_bloc.dart';
import 'package:enaklo_pos/presentation/home/dialog/discount_dialog.dart';
import 'package:enaklo_pos/presentation/home/pages/confirm_payment_page.dart';
import 'package:enaklo_pos/data/datasources/product_local_datasource.dart';
import 'package:enaklo_pos/presentation/setting/bloc/sync_product/sync_product_bloc.dart';
import 'package:enaklo_pos/data/models/response/product_response_model.dart';

import '../../../core/assets/assets.gen.dart';
import '../../../core/components/buttons.dart';
import '../../../core/components/spaces.dart';
import '../../../core/constants/colors.dart';
import '../bloc/checkout/checkout_bloc.dart';
import '../dialog/service_dialog.dart';
import '../widgets/custom_tab_bar.dart';
import '../widgets/home_title.dart';
import '../widgets/order_menu.dart';
import '../widgets/product_card.dart';

class HomePage extends StatefulWidget {
  final bool isTable;
  final TableModel? table;
  const HomePage({
    Key? key,
    required this.isTable,
    this.table,
  }) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final searchController = TextEditingController();
  String searchQuery = '';

  @override
  void initState() {
    // First sync products from API, then load local products
    _syncAndLoadProducts();
    super.initState();
  }

  void _syncAndLoadProducts() {
    // Trigger sync from API first
    context.read<SyncProductBloc>().add(const SyncProductEvent.syncProduct());

    // Also load local products initially in case sync fails or takes time
    context
        .read<LocalProductBloc>()
        .add(const LocalProductEvent.getLocalProduct());

    // Initialize checkout with tax and service charge settings
    context.read<CheckoutBloc>().add(const CheckoutEvent.started());
  }

  void onCategoryTap(int index) {
    searchController.clear();
    setState(() {
      searchQuery = '';
    });
  }

  List<Product> _filterProducts(List<Product> products) {
    if (searchQuery.isEmpty) {
      return products;
    }

    return products.where((product) {
      final productName = product.name?.toLowerCase() ?? '';
      final queryLower = searchQuery.toLowerCase();
      return productName.contains(queryLower);
    }).toList();
  }

  List<Product> _filterProductsByCategory(
      List<Product> products, int categoryId) {
    final filteredBySearch = _filterProducts(products);
    return filteredBySearch
        .where((element) => element.category?.id == categoryId)
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: 'confirmation_screen',
      child: Scaffold(
        backgroundColor: AppColors.background,
        body: BlocListener<SyncProductBloc, SyncProductState>(
          listener: (context, state) {
            state.maybeWhen(
              orElse: () {},
              error: (message) {
                // If sync fails, still try to load local products
                context
                    .read<LocalProductBloc>()
                    .add(const LocalProductEvent.getLocalProduct());
              },
              loaded: (productResponseModel) async {
                // Store context reference before async operations
                final localProductBloc = context.read<LocalProductBloc>();

                // Save synced products to local database
                await ProductLocalDatasource.instance.deleteAllProducts();
                await ProductLocalDatasource.instance.insertProducts(
                  productResponseModel.data!,
                );
                // Then load local products to display
                localProductBloc.add(const LocalProductEvent.getLocalProduct());
              },
            );
          },
          child: Row(
            children: [
              Expanded(
                flex: 3,
                child: Align(
                  alignment: AlignmentDirectional.topStart,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      HomeTitle(
                        controller: searchController,
                        onChanged: (value) {
                          setState(() {
                            searchQuery = value;
                          });
                        },
                      ),
                      BlocBuilder<LocalProductBloc, LocalProductState>(
                        builder: (context, state) {
                          return Expanded(
                            child: CustomTabBarV2(
                              tabTitles: const [
                                'Semua',
                                'Makanan',
                                'Minuman',
                                'Paket'
                              ],
                              tabViews: [
                                // All Products Tab
                                SizedBox(
                                  child: state.maybeWhen(orElse: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loading: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loaded: (products) {
                                    final filteredProducts =
                                        _filterProducts(products);
                                    if (filteredProducts.isEmpty) {
                                      return const Center(
                                        child: Text('No Items Found'),
                                      );
                                    }
                                    return GridView.builder(
                                      itemCount: filteredProducts.length,
                                      padding: const EdgeInsets.all(16),
                                      gridDelegate:
                                          SliverGridDelegateWithMaxCrossAxisExtent(
                                        maxCrossAxisExtent:
                                            200, // Lebar maksimal tiap item (bisa kamu ubah)
                                        mainAxisSpacing: 30,
                                        crossAxisSpacing: 30,
                                        childAspectRatio: 0.85,
                                      ),
                                      itemBuilder: (context, index) =>
                                          ProductCard(
                                        data: filteredProducts[index],
                                        onCartButton: () {},
                                      ),
                                    );
                                  }),
                                ),
                                // Makanan Tab
                                SizedBox(
                                  child: state.maybeWhen(orElse: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loading: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loaded: (products) {
                                    if (products.isEmpty) {
                                      return const Center(
                                        child: Text('No Items'),
                                      );
                                    }
                                    final filteredProducts =
                                        _filterProductsByCategory(products, 1);
                                    return filteredProducts.isEmpty
                                        ? const _IsEmpty()
                                        : GridView.builder(
                                            itemCount: filteredProducts.length,
                                            padding: const EdgeInsets.all(16),
                                            gridDelegate:
                                                SliverGridDelegateWithMaxCrossAxisExtent(
                                              maxCrossAxisExtent:
                                                  200, // Lebar maksimal tiap item (bisa kamu ubah)
                                              mainAxisSpacing: 30,
                                              crossAxisSpacing: 30,
                                              childAspectRatio: 0.85,
                                            ),
                                            itemBuilder: (context, index) =>
                                                ProductCard(
                                              data: filteredProducts[index],
                                              onCartButton: () {},
                                            ),
                                          );
                                  }),
                                ),
                                // Minuman Tab
                                SizedBox(
                                  child: state.maybeWhen(orElse: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loading: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loaded: (products) {
                                    if (products.isEmpty) {
                                      return const Center(
                                        child: Text('No Items'),
                                      );
                                    }
                                    final filteredProducts =
                                        _filterProductsByCategory(products, 2);
                                    return filteredProducts.isEmpty
                                        ? const _IsEmpty()
                                        : GridView.builder(
                                            itemCount: filteredProducts.length,
                                            padding: const EdgeInsets.all(16),
                                            gridDelegate:
                                                SliverGridDelegateWithMaxCrossAxisExtent(
                                              maxCrossAxisExtent:
                                                  200, // Lebar maksimal tiap item (bisa kamu ubah)
                                              mainAxisSpacing: 30,
                                              crossAxisSpacing: 30,
                                              childAspectRatio: 0.85,
                                            ),
                                            itemBuilder: (context, index) {
                                              return ProductCard(
                                                data: filteredProducts[index],
                                                onCartButton: () {},
                                              );
                                            },
                                          );
                                  }),
                                ),
                                // Snack Tab
                                SizedBox(
                                  child: state.maybeWhen(orElse: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loading: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loaded: (products) {
                                    if (products.isEmpty) {
                                      return const Center(
                                        child: Text('No Items'),
                                      );
                                    }
                                    final filteredProducts =
                                        _filterProductsByCategory(products, 3);
                                    return filteredProducts.isEmpty
                                        ? const _IsEmpty()
                                        : GridView.builder(
                                            itemCount: filteredProducts.length,
                                            padding: const EdgeInsets.all(16),
                                            gridDelegate:
                                                SliverGridDelegateWithMaxCrossAxisExtent(
                                              maxCrossAxisExtent:
                                                  200, // Lebar maksimal tiap item (bisa kamu ubah)
                                              mainAxisSpacing: 30,
                                              crossAxisSpacing: 30,
                                              childAspectRatio: 0.85,
                                            ),
                                            itemBuilder: (context, index) {
                                              return ProductCard(
                                                data: filteredProducts[index],
                                                onCartButton: () {},
                                              );
                                            },
                                          );
                                  }),
                                ),
                              ],
                            ),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: Align(
                  alignment: Alignment.topCenter,
                  child: Material(
                    color: Colors.white,
                    child: Column(
                      children: [
                        Column(
                          children: [
                            HomeRightTitle(
                              table: widget.table,
                            ),
                            Container(
                              padding: const EdgeInsets.all(16.0),
                              decoration: BoxDecoration(
                                border: Border(
                                  bottom: BorderSide(
                                    color: AppColors.grey,
                                    width: 1.0,
                                  ),
                                ),
                              ),
                              child: const Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    "Order #",
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Text(
                                    "Total: 0",
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                        Expanded(
                          child: SingleChildScrollView(
                            padding: const EdgeInsets.all(16.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                BlocBuilder<CheckoutBloc, CheckoutState>(
                                  builder: (context, state) {
                                    return state.maybeWhen(
                                      orElse: () => const Center(
                                        child: Text('No Items'),
                                      ),
                                      loaded: (products,
                                          discountModel,
                                          discount,
                                          discountAmount,
                                          tax,
                                          serviceCharge,
                                          totalQuantity,
                                          totalPrice,
                                          draftName,
                                          orderType) {
                                        if (products.isEmpty) {
                                          return const Center(
                                            child: Text('No Items'),
                                          );
                                        }
                                        return ListView.separated(
                                          shrinkWrap: true,
                                          physics:
                                              const NeverScrollableScrollPhysics(),
                                          itemBuilder: (context, index) =>
                                              OrderMenu(data: products[index]),
                                          separatorBuilder: (context, index) =>
                                              const SpaceHeight(1.0),
                                          itemCount: products.length,
                                        );
                                      },
                                    );
                                  },
                                ),
                                const SpaceHeight(8.0),
                              ],
                            ),
                          ),
                        ),
                        Column(
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(24.0),
                              child: Column(
                                children: [
                                  // Row(
                                  //   mainAxisAlignment:
                                  //       MainAxisAlignment.spaceEvenly,
                                  //   children: [
                                  //     ColumnButton(
                                  //       label: 'Diskon',
                                  //       svgGenImage: Assets.icons.diskon,
                                  //       onPressed: () => showDialog(
                                  //         context: context,
                                  //         barrierDismissible: false,
                                  //         builder: (context) =>
                                  //             const DiscountDialog(),
                                  //       ),
                                  //     ),
                                  //     ColumnButton(
                                  //       label: 'Pajak PB1',
                                  //       svgGenImage: Assets.icons.pajak,
                                  //       onPressed: () => showDialog(
                                  //         context: context,
                                  //         builder: (context) =>
                                  //             const TaxDialog(),
                                  //       ),
                                  //     ),
                                  //     ColumnButton(
                                  //       label: 'Layanan',
                                  //       svgGenImage: Assets.icons.layanan,
                                  //       onPressed: () => showDialog(
                                  //         context: context,
                                  //         builder: (context) =>
                                  //             const ServiceDialog(),
                                  //       ),
                                  //     ),
                                  //   ],
                                  // ),
                                  // const SpaceHeight(8.0),
                                  // const Divider(),
                                  // const SpaceHeight(8.0),

                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      const Text(
                                        'Sub total',
                                        style: TextStyle(
                                          color: AppColors.black,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      BlocBuilder<CheckoutBloc, CheckoutState>(
                                        builder: (context, state) {
                                          final price = state.maybeWhen(
                                              orElse: () => 0,
                                              loaded: (products,
                                                  discountModel,
                                                  discount,
                                                  discountAmount,
                                                  tax,
                                                  serviceCharge,
                                                  totalQuantity,
                                                  totalPrice,
                                                  draftName,
                                                  orderType) {
                                                if (products.isEmpty) {
                                                  return 0;
                                                }
                                                return products
                                                    .map((e) =>
                                                        e.product.price!
                                                            .toIntegerFromText *
                                                        e.quantity)
                                                    .reduce((value, element) =>
                                                        value + element);
                                              });

                                          return Text(
                                            price.currencyFormatRp,
                                            style: const TextStyle(
                                              color: AppColors.primary,
                                              fontWeight: FontWeight.w900,
                                            ),
                                          );
                                        },
                                      ),
                                    ],
                                  ),
                                  const SpaceHeight(8.0),
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      const Text(
                                        'Pajak PB1',
                                        style: TextStyle(
                                          color: AppColors.black,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      BlocBuilder<CheckoutBloc, CheckoutState>(
                                        builder: (context, state) {
                                          final tax = state.maybeWhen(
                                              orElse: () => 0,
                                              loaded: (products,
                                                  discountModel,
                                                  discount,
                                                  discountAmount,
                                                  tax,
                                                  serviceCharge,
                                                  totalQuantity,
                                                  totalPrice,
                                                  draftName,
                                                  orderType) {
                                                if (products.isEmpty) {
                                                  return 0;
                                                }
                                                return tax;
                                              });
                                          return Text(
                                            '$tax %',
                                            style: const TextStyle(
                                              color: AppColors.primary,
                                              fontWeight: FontWeight.w600,
                                            ),
                                          );
                                        },
                                      ),
                                    ],
                                  ),
                                  const SpaceHeight(8.0),
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      const Text(
                                        'Layanan',
                                        style: TextStyle(
                                          color: AppColors.black,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      BlocBuilder<CheckoutBloc, CheckoutState>(
                                        builder: (context, state) {
                                          final serviceCharge = state.maybeWhen(
                                              orElse: () => 0,
                                              loaded: (products,
                                                  discountModel,
                                                  discount,
                                                  discountAmount,
                                                  tax,
                                                  serviceCharge,
                                                  totalQuantity,
                                                  totalPrice,
                                                  draftName,
                                                  orderType) {
                                                return serviceCharge;
                                              });
                                          return Text(
                                            '$serviceCharge %',
                                            style: const TextStyle(
                                              color: AppColors.primary,
                                              fontWeight: FontWeight.w600,
                                            ),
                                          );
                                        },
                                      ),
                                    ],
                                  ),
                                  const SpaceHeight(8.0),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    children: [
                                      _buildSmallButton(
                                        onTap: () => showDialog(
                                          context: context,
                                          builder: (context) =>
                                              const ServiceDialog(),
                                        ),
                                        label: 'Layanan',
                                      ),
                                      SpaceWidth(8),
                                      _buildSmallButton(
                                        onTap: () => showDialog(
                                          context: context,
                                          builder: (context) =>
                                              const DiscountDialog(),
                                        ),
                                        label: 'Diskon',
                                      ),
                                    ],
                                  ),
                                  const SpaceHeight(8.0),
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      const Text(
                                        'Diskon',
                                        style: TextStyle(
                                          color: AppColors.black,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      BlocBuilder<CheckoutBloc, CheckoutState>(
                                        builder: (context, state) {
                                          final discount = state.maybeWhen(
                                              orElse: () => 0,
                                              loaded: (products,
                                                  discountModel,
                                                  discount,
                                                  discountAmount,
                                                  tax,
                                                  serviceCharge,
                                                  totalQuantity,
                                                  totalPrice,
                                                  draftName,
                                                  orderType) {
                                                if (discountModel == null) {
                                                  return 0;
                                                }
                                                return discountModel.value!
                                                    .replaceAll('.00', '')
                                                    .toIntegerFromText;
                                              });
                                          return Text(
                                            '$discount %',
                                            style: const TextStyle(
                                              color: AppColors.primary,
                                              fontWeight: FontWeight.w600,
                                            ),
                                          );
                                        },
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            Align(
                              alignment: Alignment.bottomCenter,
                              child: Container(
                                height: context.deviceHeight * 0.09,
                                width: double.infinity,
                                color: AppColors.white,
                                child: Expanded(
                                  child: Button.filled(
                                    borderRadius: 0,
                                    elevation: 0,
                                    onPressed: () {
                                      context.push(ConfirmPaymentPage(
                                        isTable: widget.isTable,
                                        table: widget.table,
                                      ));
                                    },
                                    label: 'Lanjutkan Pembayaran',
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  GestureDetector _buildSmallButton({
    required Function() onTap,
    required String label,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 10.0,
          vertical: 6.0,
        ),
        decoration: BoxDecoration(
          color: AppColors.primary.withOpacity(0.1),
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Text(
          label,
          style: TextStyle(
            color: AppColors.primary,
            fontWeight: FontWeight.bold,
            fontSize: 12.0,
          ),
        ),
      ),
    );
  }
}

class _IsEmpty extends StatelessWidget {
  const _IsEmpty();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SpaceHeight(40),
        Assets.icons.noProduct.svg(),
        const SizedBox(height: 40.0),
        const Text(
          'Belum Ada Produk',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 16),
        ),
      ],
    );
  }
}