apskel-pos-flutter/lib/presentation/home/widgets/order_menu.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:enaklo_pos/core/constants/variables.dart';
import 'package:enaklo_pos/core/extensions/int_ext.dart';
import 'package:enaklo_pos/core/extensions/string_ext.dart';
import 'package:enaklo_pos/presentation/home/bloc/checkout/checkout_bloc.dart';
import 'package:enaklo_pos/presentation/home/models/product_quantity.dart';
import 'package:enaklo_pos/presentation/home/widgets/item_notes_dialog.dart';

import '../../../core/components/spaces.dart';
import '../../../core/constants/colors.dart';

class OrderMenu extends StatelessWidget {
  final ProductQuantity data;
  const OrderMenu({super.key, required this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      margin: EdgeInsets.only(bottom: 8.0),
      decoration: BoxDecoration(
        color: AppColors.primary.withOpacity(0.1),
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: Text(
                  data.product.name ?? "_",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              SizedBox(width: 12.0),
              _buildIconButton(
                onTap: () {
                  showDialog(
                    context: context,
                    builder: (context) => ItemNotesDialog(item: data),
                  );
                },
                icon: Icons.edit_note,
              ),
              SizedBox(width: 8.0),
              _buildIconButton(
                onTap: () {},
                icon: Icons.delete_outline,
                iconColor: AppColors.red,
              ),
            ],
          ),
          const SpaceHeight(12.0),
          Row(
            children: [
              Expanded(
                child: Text(
                  (data.product.price!.toIntegerFromText * data.quantity)
                      .currencyFormatRp,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                  style: const TextStyle(
                    color: AppColors.primary,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              SpaceWidth(16),
              Container(
                padding: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  color: AppColors.white,
                  borderRadius: BorderRadius.circular(50.0),
                ),
                child: Row(
                  children: [
                    _buildIconButton(
                      onTap: () {
                        context
                            .read<CheckoutBloc>()
                            .add(CheckoutEvent.removeItem(data.product));
                      },
                      icon: Icons.remove,
                      iconColor: AppColors.primary,
                      bgColor: Colors.grey.shade300,
                    ),
                    SizedBox(
                      width: 30.0,
                      child: Center(
                        child: Text(
                          data.quantity.toString(),
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    _buildIconButton(
                      onTap: () {
                        context
                            .read<CheckoutBloc>()
                            .add(CheckoutEvent.addItem(data.product));
                      },
                      icon: Icons.add,
                      iconColor: AppColors.white,
                      bgColor: AppColors.primary,
                    ),
                  ],
                ),
              ),
            ],
          ),
          if (data.notes.isNotEmpty) ...[
            SpaceHeight(8.0),
            Divider(),
            SpaceHeight(8.0),
            Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(
                horizontal: 8.0,
                vertical: 4.0,
              ),
              decoration: BoxDecoration(
                color: AppColors.white,
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Text(
                'Notes: ${data.notes}',
                style: const TextStyle(
                  fontSize: 14,
                  color: AppColors.black,
                  fontWeight: FontWeight.w500,
                  fontStyle: FontStyle.italic,
                ),
              ),
            ),
          ],
        ],
      ),
    );
  }

  GestureDetector _buildIconButton({
    required Function()? onTap,
    Color iconColor = AppColors.black,
    Color bgColor = AppColors.white,
    required IconData icon,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.all(4.0),
        decoration: BoxDecoration(
          color: bgColor,
          shape: BoxShape.circle,
        ),
        child: Icon(
          icon,
          size: 20,
          color: iconColor,
        ),
      ),
    );
  }
}

class OrderMenuOld extends StatelessWidget {
  final ProductQuantity data;
  const OrderMenuOld({super.key, required this.data});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Flexible(
              child: ListTile(
                contentPadding: EdgeInsets.zero,
                leading: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(50.0)),
                  child:
                      // Icon(
                      //   Icons.fastfood,
                      //   size: 50,
                      //   color: AppColors.primary,
                      // ),
                      CachedNetworkImage(
                    imageUrl: data.product.image!.contains('http')
                        ? data.product.image!
                        : '${Variables.baseUrl}/${data.product.image}',
                    width: 50.0,
                    height: 50.0,
                    fit: BoxFit.cover,
                    errorWidget: (context, url, error) =>
                        const Icon(Icons.error),
                  ),
                ),
                title: Row(
                  children: [
                    Expanded(
                      child: Text(data.product.name ?? "-",
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.bold,
                          )),
                    ),
                    GestureDetector(
                      onTap: () {
                        showDialog(
                          context: context,
                          builder: (context) => ItemNotesDialog(item: data),
                        );
                      },
                      child: const Icon(
                        Icons.edit_note,
                        size: 20,
                        color: AppColors.primary,
                      ),
                    ),
                  ],
                ),
                subtitle: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                        data.product.price!.toIntegerFromText.currencyFormatRp),
                    if (data.notes.isNotEmpty) ...[
                      const SpaceHeight(4.0),
                      Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 8.0,
                          vertical: 4.0,
                        ),
                        decoration: BoxDecoration(
                          color: AppColors.primary.withOpacity(0.1),
                          borderRadius: BorderRadius.circular(4.0),
                        ),
                        child: Text(
                          'Notes: ${data.notes}',
                          style: const TextStyle(
                            fontSize: 12,
                            color: AppColors.primary,
                            fontStyle: FontStyle.italic,
                          ),
                        ),
                      ),
                    ],
                  ],
                ),
              ),
            ),
            Row(
              children: [
                GestureDetector(
                  onTap: () {
                    context
                        .read<CheckoutBloc>()
                        .add(CheckoutEvent.removeItem(data.product));
                  },
                  child: Container(
                    width: 30,
                    height: 30,
                    color: AppColors.white,
                    child: const Icon(
                      Icons.remove_circle,
                      color: AppColors.primary,
                    ),
                  ),
                ),
                SizedBox(
                  width: 30.0,
                  child: Center(
                      child: Text(
                    data.quantity.toString(),
                  )),
                ),
                GestureDetector(
                  onTap: () {
                    context
                        .read<CheckoutBloc>()
                        .add(CheckoutEvent.addItem(data.product));
                  },
                  child: Container(
                    width: 30,
                    height: 30,
                    color: AppColors.white,
                    child: const Icon(
                      Icons.add_circle,
                      color: AppColors.primary,
                    ),
                  ),
                ),
              ],
            ),
            const SpaceWidth(8),
            SizedBox(
              width: 80.0,
              child: Text(
                (data.product.price!.toIntegerFromText * data.quantity)
                    .currencyFormatRp,
                textAlign: TextAlign.right,
                style: const TextStyle(
                  color: AppColors.primary,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}