import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:turquessa_mesas_hoster/core/models/mesa_model.dart'; import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart'; import 'package:turquessa_mesas_hoster/utils/widgets/custom_card.dart'; import 'package:turquessa_mesas_hoster/utils/widgets/navigation_rail.dart'; import '../../../utils/widgets/ordenes_card.dart'; import '../../viewmodels/viewmodels.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override Formulario createState() => Formulario(); } class Formulario extends State { int _selectedIndex = 0; @override void initState() { super.initState(); final mesaViewModel = Provider.of(context, listen: false); WidgetsBinding.instance.addPostFrameCallback((_) async { Provider.of(context, listen: false) .sincronizarProductosYCategorias(); await mesaViewModel.sincronizarMesas(); await mesaViewModel.fetchLocal(); }); } @override Widget build(BuildContext context) { final mesaViewModel = Provider.of(context); final loginViewModel = Provider.of(context); var _selectedIndex; return Scaffold( backgroundColor: Colors.grey.shade200, appBar: AppBar( title: const CustomAppbar(), ), body: Container( decoration: const BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Color(0xFFE0F7FA), Color(0xFFB2EBF2), Color(0xFF80DEEA), Color(0xFF4DD0E1), ], ), ), child: Row( children: [ CustomNavigationRail(selectedIndex: _selectedIndex), Expanded( flex: 1, child: Center( child: Container( decoration: const BoxDecoration( color: Colors.white, ), child: GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, childAspectRatio: 1.0, crossAxisSpacing: 10.0, mainAxisSpacing: 10.0, ), padding: const EdgeInsets.all(10), itemCount: mesaViewModel.mesas.length, itemBuilder: (context, index) { final mesa = mesaViewModel.mesas[index]; return GestureDetector( onTap: () { setState(() { mesaViewModel.selectMesa(mesa); }); }, child: TableCard( mesa: mesa, ), ); }, ), ), ), ), if (mesaViewModel.selectedMesa != null) Expanded( child: Container( margin: const EdgeInsets.symmetric(horizontal: 10), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.2), blurRadius: 5, spreadRadius: 1, ) ], ), child: TablaDetalles( status: EstadoPedido.disponible, table: mesaViewModel.selectedMesa ?? Mesa( activa: false, id: 0, nombre: 'Mesa sin nombre', estado: EstadoPedido.disponible)), )), ], ), ), ); } } class TablaDetalles extends StatelessWidget { final Mesa table; final EstadoPedido status; const TablaDetalles({ Key? key, required this.table, required this.status, }) : super(key: key); @override Widget build(BuildContext context) { return Container( padding: const EdgeInsets.all(10), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.2), blurRadius: 5, spreadRadius: 1, ) ], ), child: Column( children: [ // Header Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: table.activa! ? Colors.blue : Colors.grey, borderRadius: const BorderRadius.vertical(top: Radius.circular(10)), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ const Icon(Icons.table_restaurant, color: Colors.white, size: 24), const SizedBox(width: 8), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( table.nombre ?? 'Mesa sin nombre', style: const TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, ), ), const Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Icon( Icons.access_time_rounded, color: Colors.white70, size: 16, ), Padding( padding: EdgeInsets.only(left: 4), child: Text( "03:56", style: TextStyle( fontSize: 14, color: Colors.white, fontWeight: FontWeight.normal, ), ), ), ], ) ], ), ], ), Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), decoration: BoxDecoration( color: Colors.white.withOpacity(0.2), borderRadius: BorderRadius.circular(20), ), child: Text(table.activa! ? 'Activa' : 'Inactiva', style: const TextStyle( color: Colors.white, fontWeight: FontWeight.bold, )), ), ], ), ), Expanded( child: SingleChildScrollView( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 10), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ Text( "Estatus: ${status.toString().split('.').last}", style: const TextStyle( fontWeight: FontWeight.bold, color: Colors.black, ), ), ], ), // const SizedBox(height: 16), // IconDataByStatus(status: status), const SizedBox(height: 16), Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.2), blurRadius: 1, spreadRadius: 1, ) ], borderRadius: BorderRadius.circular(10), border: Border.all(color: Colors.grey.shade200), ), child: Column(children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Text("Pedido Actual", style: TextStyle( fontWeight: FontWeight.bold, color: Colors.black, )), GestureDetector( onTap: () { Navigator.of(context) .pushNamed('creacion-pedido'); }, child: const Row(children: [ const Text("Ver detalle"), const Icon(Icons.arrow_forward_ios_rounded), ]), ) ]), const SizedBox(height: 10), const CustomProductCard( titulo: "Original Cheesse Meat burger with Chips", precio: "15.20", cantidad: 1, ), const SizedBox(height: 10), const CustomProductCard( titulo: "Original Cheesse Meat burger with Chips", precio: "15.20", cantidad: 1, ), const SizedBox(height: 10), const CustomProductCard( titulo: "Original Cheesse Meat burger with Chips", precio: "15.20", cantidad: 1, ), ]), ), //? const OrdenesScreen(), ], ), ), ), ), ], ), ); } } class TableCard extends StatelessWidget { final Mesa mesa; const TableCard({ super.key, required this.mesa, }); @override Widget build(BuildContext context) { final status = mesa.estado ?? EstadoPedido.disponible; Color backgroundColor; Color iconColor; IconData icon; Color cardColor; switch (status) { case EstadoPedido.disponible: backgroundColor = const Color.fromARGB(255, 220, 252, 232); iconColor = Colors.green; icon = Icons.table_restaurant_rounded; cardColor = const Color.fromARGB(255, 220, 252, 232); break; case EstadoPedido.surtida: backgroundColor = const Color.fromARGB(255, 220, 234, 254); iconColor = Colors.blue; icon = Icons.coffee_rounded; cardColor = const Color.fromARGB(255, 220, 234, 254); break; case EstadoPedido.preparacion: backgroundColor = const Color.fromARGB(255, 243, 232, 255); iconColor = Colors.deepPurple; icon = Icons.kitchen_rounded; cardColor = const Color.fromARGB(255, 243, 232, 255); break; case EstadoPedido.cobrado: backgroundColor = const Color.fromARGB(255, 255, 238, 213); iconColor = Colors.amber; icon = Icons.attach_money_rounded; cardColor = const Color.fromARGB(255, 255, 238, 213); break; default: backgroundColor = Colors.grey.shade200; iconColor = Colors.grey; icon = Icons.settings; cardColor = Colors.white; break; } return Card( color: cardColor, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ IconButton( onPressed: () { if (status == EstadoPedido.disponible) { final mesaViewModel = Provider.of(context, listen: false); mesaViewModel.CambiarEstadoPedidoMesa(EstadoPedido.preparacion); } }, iconSize: 48, style: ButtonStyle( backgroundColor: MaterialStateProperty.all(backgroundColor), ), icon: Icon(icon, color: iconColor), ), const SizedBox(height: 8), Text( mesa.nombre ?? 'Mesa sin nombre', style: TextStyle( color: status == EstadoPedido.disponible ? Colors.black : Colors.black87, fontSize: 20, fontWeight: FontWeight.w500, ), ) ], ), ); } }