import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:http/http.dart' as http;
import 'package:responsive_builder/responsive_builder.dart';
import 'package:shared_preferences/shared_preferences.dart';

import '../../config/apiUrl.dart';
import '../../routes/custom_appBar.dart';
import '../../routes/custom_drawer.dart';
import '../../services/apiService.dart';
import '../../utils/auth_utils.dart';
import '../../utils/pagination.dart';
import '../../widgets/custom_breadcrumb_navigation.dart';
import '../../widgets/popup_userList_action.dart';
import 'hotelsDetails.dart';

class HotelsDataList extends StatefulWidget {
  const HotelsDataList({super.key});

  @override
  HotelsDataListState createState() => HotelsDataListState();
}

class HotelsDataListState extends State<HotelsDataList> {
  final GlobalKey<HotelsDataListState> hotelsListKey =
      GlobalKey<HotelsDataListState>();

  final ApiService apiService = ApiService();
  Future<List<dynamic>>? futureHotels;
  // late Future<List<dynamic>> futureHotels;

  late Map<String, dynamic> userSingleData;
  List<dynamic>? apiCountryData;
  String? selectedUserId;
  String? orgId;

  Color? layoutColor;
  Color? bodyColor;

  List allHotels = [];
  List filteredHotels = [];
  TextEditingController searchController = TextEditingController();

  int currentPage = 0;
  int itemsPerPage = 10;

  @override
  void initState() {
    super.initState();
    _checkAuthAndLoadData();
    // futureHotels = fetchGetHotels();
    //
    // futureHotels.then((objects) {
    //   setState(() {
    //     allHotels = objects;
    //   });
    // });
    //
    // WidgetsBinding.instance.addPostFrameCallback((_) {
    //   fetchCountryList();
    //   loadInitialData();
    // });

    // futurePlans = fetchPlans();
  }

  void _checkAuthAndLoadData() async {
    final String? token = await getToken(); // Your async function to get token

    if (token == null || token.isEmpty) {
      // Token doesn't exist → redirect to login
      context.go(
        "/",
      ); // or use: router.go("/") if you're using `GoRouter` directly
      return;
    }
    if (!mounted) return;
    try {
      futureHotels = fetchGetHotels();
      final roleUser = await getRoleUser();
      if (roleUser != null &&
          (roleUser == 'Org Admin' || roleUser == 'Travel Admin')) {
        futureHotels?.then((objects) {
          setState(() {
            allHotels = objects;
          });
        });

        WidgetsBinding.instance.addPostFrameCallback((_) {
          fetchCountryList();
          loadInitialData();
        });
      } else {
        apiService.logout(context);
      }
    } catch (e) {
      print("group : $e");
    }
  }

  Future<List<dynamic>> refreshData() {
    print("Calling Refresh Data");

    futureHotels = fetchGetHotels();

    return futureHotels!.then((objects) {
      setState(() {
        allHotels = objects;
        filteredHotels = objects;
        searchController.text = "";
      });
      return objects;
    });
  }

  void loadInitialData() async {
    String? layoutString = await getLayoutColor();
    String? bodyStringColor = await getBodyColor();

    setState(() {
      layoutColor =
          layoutString != null
              ? Color(int.parse(layoutString))
              : Colors.redAccent;

      bodyColor =
          bodyStringColor != null
              ? Color(int.parse(bodyStringColor))
              : Colors.white;
    });
  }

  Future<String?> getToken() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString('auth_token');
  }

  Future<List<dynamic>> fetchGetHotels() async {
    // return [];
    orgId = await getOrgId();
    final String apiUrlData = '$apiUrl/api/getHotels?for=table_view';

    final String? token = await getToken();

    print("Fetch Hotels 2KN : $token");

    if (token == null) {
      throw Exception('Token not found. Please log in.');
    }

    final response = await http.get(
      Uri.parse(apiUrlData),
      headers: {
        'Authorization': 'Bearer $token',
        'Content-Type': 'application/json',
        'app-signature': 'ts-traveltool-2025-signature-123456',
      },
    );

    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      return data['data']; // Returning raw JSON list
    } else if (response.statusCode == 403) {
      print("403-FORB");
      await apiService.logout(context);
      return [];
      // throw Exception('Failed to load users');
    } else {
      throw Exception('Failed to load users');
    }
  }

  Future<void> fetchCountryList() async {
    final String apiUrldata = '$apiUrl/api/getcountryMaster';

    final token = await getToken();

    if (token == null) {
      throw Exception('Token not found. Please log in.');
    }

    final response = await http.get(
      Uri.parse(apiUrldata),
      headers: {
        'Authorization': 'Bearer $token',
        'Content-Type': 'application/json',
        'app-signature': 'ts-traveltool-2025-signature-123456',
      },
    );

    if (response.statusCode == 200) {
      try {
        final data = json.decode(response.body);
        print("Country Master - $data");

        if (!data.containsKey('data') || data['data'] is! List) {
          throw Exception(
            "Invalid response format: 'data' field is missing or not a List",
          );
        }

        List<dynamic> plansJson = data['data']; // 'data' is a Map, not a List

        if (data['data'] is List) {
          List<dynamic> plansJson = data['data'];
          print("plansJson.length - ${plansJson.length}");
        } else {
          print("The 'data' key does not contain a list.");
        }

        setState(() {
          apiCountryData = plansJson; // Store API response in state
        });
        print('plansJSONContry - $plansJson');
      } catch (e) {
        throw Exception('Error parsing response: $e');
      }
    } else if (response.statusCode == 403) {
      print("403-FORB");
      await apiService.logout(context);
      return null;
      // throw Exception('Failed to load users');
    } else {
      throw Exception('Failed to load plans');
    }
  }

  // Refresh user list after update
  void refreshUserList() {
    setState(() {
      futureHotels = fetchGetHotels(); // Re-fetch users after status update
      // Wait for futurePlans to be fetched and update allPlans
    });
  }

  void filterHotels(String query) {
    print("allHotels before filtering: $query");
    final lowerQuery = query.toLowerCase();
    setState(() {
      filteredHotels =
          allHotels.where((hotels) {
            final isActiveStatus =
                hotels['is_active'] == "1" ? "active" : "inactive";
            return (hotels['country_code']?.toLowerCase().contains(
                      lowerQuery,
                    ) ??
                    false) ||
                (hotels['country_name']?.toLowerCase().contains(lowerQuery) ??
                    false) ||
                (hotels['category']?.toLowerCase().contains(lowerQuery) ??
                    false) ||
                (hotels['city']?.toLowerCase().contains(lowerQuery) ?? false) ||
                (hotels['hotel_chain']?.toLowerCase().contains(lowerQuery) ??
                    false) ||
                (hotels['hotel_name']?.toLowerCase().contains(lowerQuery) ??
                    false) ||
                (isActiveStatus.contains(lowerQuery));
          }).toList();
      currentPage = 0;
    });
    print("filteredHotels: $filteredHotels");
  }

  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, sizingInfo) {
        bool isDesktop =
            sizingInfo.deviceScreenType == DeviceScreenType.desktop;

        return Scaffold(
          backgroundColor: Color(0xFFf5f5f5),
          // appBar: isDesktop ? null : const CustomAppBar(title: 'User Management'),
          // drawer: isDesktop ? null : CustomDrawer(isDesktop: false),
          appBar: CustomAppBar(isDesktop: isDesktop),
          drawer: CustomDrawer(isDesktop: false),
          body: Padding(
            padding:
                isDesktop
                    ? EdgeInsets.symmetric(
                      horizontal:
                          MediaQuery.of(context).size.width *
                          0.1, // 30% of screen width as horizontal padding
                      vertical:
                          MediaQuery.of(context).size.height *
                          0, // 5% of screen height as vertical padding
                    )
                    : EdgeInsets.all(0),
            child: Row(
              children: [
                // if (isDesktop) CustomDrawer(isDesktop: true),
                // const Expanded(child: Center(child: Text("User Page Content"))),
                Expanded(child: buildGroupList(isDesktop)),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget buildGroupList(bool isDesktop) {
    return Container(
      margin: isDesktop ? const EdgeInsets.only(top: 10.0, bottom: 10.0) : null,
      padding: const EdgeInsets.all(1),
      decoration: BoxDecoration(
        color: isDesktop ? Colors.white : Color(0xFFFCFCFC),
      ),
      // decoration: BoxDecoration(
      //     // color: Colors.amber,
      //     // color: bodyColor,
      //     color: Color(0xFFE1F5FE),
      //     border: Border.all(
      //         color: Colors.white,
      //         // color: Color(0xFFF7F7FB),
      //         width: 3.5)),
      child: buildUserTable(isDesktop),
    );
  }

  Widget buildUserTable(bool isDesktop) {
    return Container(
      // margin: isDesktop
      //     ? EdgeInsets.all(10.0)
      //     : EdgeInsets.only(left: 20.0, bottom: 20.0, top: 10.0, right: 20.0),
      // padding: const EdgeInsets.all(10),
      height:
          isDesktop
              ? MediaQuery.of(context).size.height * 0.98
              : MediaQuery.of(context).size.height,

      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Container(
          color: Colors.white,
          padding: const EdgeInsets.all(10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // Divider(
              //   thickness: 0.2, // how "thick" the line is
              //   color: Colors.grey, // optional
              // ),
              Row(
                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Container(
                        child: BreadcrumbNavigation(
                          isDesktop: isDesktop,
                          breadcrumbItems: [
                            BreadcrumbItem(
                              title: 'Org Settings',
                              tooltip: 'Go To Organization Settings',
                              onTap: (context) {
                                context.go("/OrganizationSettings");
                              },
                            ),
                            BreadcrumbItem(title: 'Hotel Details'),
                          ],
                        ),
                      ),
                      // Text(
                      //   'Hotel Details',
                      //   style: GoogleFonts.poppins(
                      //     fontSize: isDesktop ? 16 : 14,
                      //     fontWeight: FontWeight.w600,
                      //     color: Colors.black,
                      //   ),
                      // ),
                    ],
                  ),
                  if (isDesktop)
                    SizedBox(width: MediaQuery.of(context).size.width * 0.12),
                  // SizedBox(width: MediaQuery.of(context).size.width * 0.16),
                  if (isDesktop)
                    Container(
                      width: MediaQuery.of(context).size.width * 0.2,
                      height: 40,
                      child: TextField(
                        controller: searchController,
                        inputFormatters: [
                          FilteringTextInputFormatter.allow(
                            RegExp(r'[a-zA-Z0-9 _-]'),
                          ),
                        ],
                        onChanged: filterHotels,
                        decoration: InputDecoration(
                          hintText: "Search ...",
                          hintStyle: TextStyle(
                            fontSize: 12,
                            color: Color(0xFF9E9DBD),
                          ),
                          prefixIcon: Icon(
                            Icons.search,
                            color: Color(0xFF9E9DBD),
                            size: 18,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide(
                              color: Colors.grey.shade200,
                              width: 0.5,
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide(
                              color: Colors.grey.shade300,
                              width: 1,
                            ),
                          ),
                        ),
                        style: GoogleFonts.poppins(fontSize: 12),
                      ),
                    ),
                  // SizedBox(width: 16),
                  Spacer(),

                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Color(0xFF114D8B),
                      foregroundColor: Colors.white,
                      disabledBackgroundColor: Color(0xFF114D8B),
                      disabledForegroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                        side: BorderSide(color: Color(0xFF114D8B), width: 2),
                      ),
                      padding: EdgeInsets.symmetric(
                        horizontal: 20,
                        vertical: 12,
                      ),
                    ),
                    onPressed: () async {
                      showDialog(
                        context: context,
                        builder:
                            (context) => HotelsData(
                              isDesktop: isDesktop,
                              layoutColor: layoutColor!,
                              fetchGetHotels: refreshData,
                              //   role:
                              //   "Travel Agent"
                            ),
                      );
                    },
                    child: Row(
                      mainAxisSize:
                          MainAxisSize.min, // Ensures content fits nicely
                      children: [
                        Text(
                          "Add Hotels",
                          style: GoogleFonts.poppins(
                            fontSize: isDesktop ? 13 : 11,
                          ),
                        ),
                        SizedBox(width: 8), // spacing between icon and text
                        Icon(
                          Icons.add_circle_outline_rounded,
                          size: 15,
                          color: Colors.white,
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              if (!isDesktop) SizedBox(height: 5),
              isDesktop
                  ? SizedBox.shrink()
                  : Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.width * 0.8,
                        height: 35,
                        child: TextField(
                          controller: searchController,
                          onChanged: filterHotels,
                          decoration: InputDecoration(
                            hintText: "Search ...",
                            hintStyle: TextStyle(
                              fontSize: 12,
                              color: Color(0xFF9E9DBD),
                            ),
                            prefixIcon: Icon(
                              Icons.search,
                              color: Color(0xFF9E9DBD),
                              size: 18,
                            ),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(12),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(12),
                              borderSide: BorderSide(
                                color: Colors.grey.shade200,
                                width: 0.5,
                              ),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(12),
                              borderSide: BorderSide(
                                color: Colors.grey.shade300,
                                width: 1,
                              ),
                            ),
                          ),
                          style: GoogleFonts.poppins(fontSize: 12),
                        ),
                      ),
                      // SizedBox(width: 16),
                    ],
                  ),
              const SizedBox(height: 10),
              FutureBuilder<List<dynamic>>(
                future: futureHotels,
                builder: (context, snapshot) {
                  final adjHgt = MediaQuery.of(context).size.height;
                  if (futureHotels == null) {
                    return const Center(child: CircularProgressIndicator());
                  }

                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const Center(child: CircularProgressIndicator());
                  } else if (snapshot.hasError ||
                      !snapshot.hasData ||
                      snapshot.data!.isEmpty) {
                    return Center(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            // const Icon(Icons.error_outline,
                            //     color: Colors.redAccent, size: 60),
                            // const SizedBox(height: 16),
                            // Text(
                            //   "Oops!",
                            //   style: GoogleFonts.poppins(
                            //       fontSize: 20,
                            //       fontWeight: FontWeight.bold,
                            //       color: Colors.redAccent),
                            // ),
                            SizedBox(height: adjHgt / 4),
                            Text(
                              "No Data Found ",
                              textAlign: TextAlign.center,
                              style: GoogleFonts.poppins(
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                                color: Colors.grey,
                              ),
                            ),
                            const SizedBox(height: 20),
                            // Text(
                            //   "Please Create Hotels",
                            //   textAlign: TextAlign.center,
                            //   style: GoogleFonts.poppins(
                            //     fontSize: 16,
                            //     color: Colors.grey,
                            //   ),
                            // ),
                            // const SizedBox(height: 20),
                          ],
                        ),
                      ),
                    );
                  }

                  List<dynamic> hotels =
                      filteredHotels.isNotEmpty ? filteredHotels : allHotels;

                  hotels.sort((a, b) {
                    DateTime dateA = DateTime.parse(a['created_on']);
                    DateTime dateB = DateTime.parse(b['created_on']);

                    return dateB.compareTo(dateA); // Descending: newest first
                  });

                  List paginatedHotels =
                      hotels
                          .skip(currentPage * itemsPerPage)
                          .take(itemsPerPage)
                          .toList();

                  Widget table = LayoutBuilder(
                    builder: (context, constraints) {
                      double minWidth = isDesktop ? constraints.maxWidth : 1300;

                      return ConstrainedBox(
                        constraints: BoxConstraints(minWidth: minWidth),
                        child: DataTable(
                          dividerThickness: 0.5,
                          columnSpacing: isDesktop ? 24.0 : 16.0,
                          border: TableBorder(
                            horizontalInside: BorderSide(
                              width: 0.5,
                              color: Colors.grey.shade200,
                            ),
                          ),
                          columns: [
                            DataColumn(
                              label: Text(
                                'Hotel Name',
                                style: GoogleFonts.poppins(
                                  fontSize: 13,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                            DataColumn(
                              label: Text(
                                'Hotel Chain',
                                style: GoogleFonts.poppins(
                                  fontSize: 13,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                            DataColumn(
                              label: Text(
                                'Category',
                                style: GoogleFonts.poppins(
                                  fontSize: 13,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                            DataColumn(
                              label: Text(
                                'City',
                                style: GoogleFonts.poppins(
                                  fontSize: 13,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                            DataColumn(
                              label: Text(
                                'Country',
                                style: GoogleFonts.poppins(
                                  fontSize: 13,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                            DataColumn(
                              label: Text(
                                'Status',
                                style: GoogleFonts.poppins(
                                  fontSize: 13,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                            DataColumn(
                              label: Text(
                                'Actions',
                                style: GoogleFonts.poppins(
                                  fontSize: 13,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                          ],
                          rows:
                              paginatedHotels.map((hotels) {
                                String hotelsId =
                                    hotels['hotel_id']
                                        .toString(); // Get user ID
                                bool isSelected = selectedUserId == hotelsId;

                                return DataRow(
                                  cells: [
                                    DataCell(
                                      Text(
                                        hotels['hotel_name'] ?? 'N/A',
                                        style: TextStyle(
                                          fontSize: 13,
                                          fontFamily: "Inter",
                                        ),
                                        softWrap: true,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                    DataCell(
                                      Text(
                                        hotels['hotel_chain'] ?? '',
                                        style: TextStyle(
                                          fontSize: 13,
                                          fontFamily: "Inter",
                                        ),
                                      ),
                                    ),
                                    DataCell(
                                      Text(
                                        hotels['category'] ?? '',
                                        style: TextStyle(
                                          fontSize: 13,
                                          fontFamily: "Inter",
                                        ),
                                      ),
                                    ),
                                    DataCell(
                                      Text(
                                        hotels['city'] ?? 'N/A',
                                        style: TextStyle(
                                          fontSize: 13,
                                          fontFamily: "Inter",
                                        ),
                                        softWrap: true,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                    DataCell(
                                      Text(
                                        hotels['country_name'] ?? '',
                                        style: TextStyle(
                                          fontSize: 13,
                                          fontFamily: "Inter",
                                        ),
                                      ),
                                    ),
                                    DataCell(
                                      Text(
                                        hotels['is_active'] == "1"
                                            ? 'Active'
                                            : 'Inactive',
                                        style: TextStyle(
                                          fontSize: 13,
                                          fontFamily: "Inter",
                                          color:
                                              hotels['is_active'] == "1"
                                                  ? Colors.green
                                                  : Colors.grey,
                                        ),
                                        softWrap: true,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                    DataCell(
                                      // UserActionsMenu(
                                      //   user: hotels,
                                      //   getUserDetails: (id) =>
                                      //       apiService.getSingleUser(id),
                                      // ),
                                      GestureDetector(
                                        child: Tooltip(
                                          message: 'Edit Hotel Details',
                                          child: Image.asset(
                                            'assets/images/IconsImg/edit.png',
                                            width: 20,
                                            height: 15,
                                          ),
                                        ),
                                        onTap: () async {
                                          // final userId = getUserId(user['user_id']);
                                          // final usersData = await getUserDetails(userId);
                                          //
                                          final hotelsId = int.tryParse(
                                            hotels['hotel_id'].toString(),
                                          );

                                          if (hotelsId != null) {
                                            print("HotelsId -- $hotelsId");
                                            final data = await apiService
                                                .getHotelsDetailsFind(
                                                  context,
                                                  hotelsId,
                                                );
                                            print("HotelsId -- $data");

                                            showDialog(
                                              context: context,
                                              builder:
                                                  (context) => HotelsData(
                                                    isDesktop: isDesktop,
                                                    hotelsId:
                                                        hotelsId, // Pass the ID
                                                    hotelsData: data,
                                                    layoutColor: layoutColor!,
                                                    // fetchGetHotels: fetchGetHotels,
                                                    fetchGetHotels: refreshData,
                                                    //   role:
                                                    //   "Travel Agent"
                                                  ),
                                            );
                                          } else {
                                            print("Invalid Hotels ID");
                                          }
                                        },
                                      ),
                                    ),
                                  ],
                                );
                              }).toList(),
                        ),
                      );
                    },
                  );

                  Widget buildMobileCardView(List<dynamic> paginatedUser) {
                    return ListView.builder(
                      itemCount: paginatedUser.length,
                      itemBuilder: (context, index) {
                        final hotels = paginatedUser[index];
                        return Card(
                          color: Colors.white,
                          margin: EdgeInsets.symmetric(
                            horizontal: 12,
                            vertical: 6,
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12),
                          ),
                          elevation: 3,
                          child: Padding(
                            padding: const EdgeInsets.all(12.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                // Status and Employee Code
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      hotels['hotel_name'] ?? 'N/A',
                                      style: GoogleFonts.poppins(
                                        fontSize: 10,
                                        color: Colors.black87,
                                        fontWeight: FontWeight.w700,
                                      ),
                                    ),

                                    GestureDetector(
                                      child: Tooltip(
                                        message: 'Edit Hotel Details',
                                        child: Image.asset(
                                          'assets/images/IconsImg/edit.png',
                                          width: 20,
                                          height: 15,
                                        ),
                                      ),
                                      onTap: () async {
                                        // final userId = getUserId(user['user_id']);
                                        // final usersData = await getUserDetails(userId);
                                        //
                                        final hotelsId = int.tryParse(
                                          hotels['hotel_id'].toString(),
                                        );

                                        if (hotelsId != null) {
                                          print("HotelsId -- $hotelsId");
                                          final data = await apiService
                                              .getHotelsDetailsFind(
                                                context,
                                                hotelsId,
                                              );
                                          print("HotelsId -- $data");

                                          showDialog(
                                            context: context,
                                            builder:
                                                (context) => HotelsData(
                                                  isDesktop: isDesktop,
                                                  hotelsId:
                                                      hotelsId, // Pass the ID
                                                  hotelsData: data,
                                                  layoutColor: layoutColor!,
                                                  // fetchGetHotels: fetchGetHotels,
                                                  fetchGetHotels: refreshData,
                                                  //   role:
                                                  //   "Travel Agent"
                                                ),
                                          );
                                        } else {
                                          print("Invalid Hotels ID");
                                        }
                                      },
                                    ),
                                  ],
                                ),

                                SizedBox(height: 2),
                                // Trip Id and Trip Name
                                Row(
                                  children: [
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "${hotels['hotel_chain'] ?? ''} ",
                                          style: GoogleFonts.poppins(
                                            fontSize: 12,
                                            color: Colors.black87,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                                SizedBox(height: 2),
                                Row(
                                  children: [
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "${hotels['category'] ?? ''} ",
                                          style: GoogleFonts.poppins(
                                            fontSize: 12,
                                            color: Colors.black87,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                                SizedBox(height: 2),
                                Row(
                                  children: [
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "${hotels['city'] ?? ''} ",
                                          style: GoogleFonts.poppins(
                                            fontSize: 12,
                                            color: Colors.black87,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                                SizedBox(height: 2),
                                Row(
                                  children: [
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          hotels['country_name'] ?? '',
                                          style: GoogleFonts.poppins(
                                            fontSize: 10,
                                            color: Colors.black87,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                                // **
                              ],
                            ),
                          ),
                        );
                      },
                    );
                  }

                  return Expanded(
                    child: Column(
                      // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child:
                              isDesktop
                                  ? (searchController.text.isNotEmpty &&
                                          filteredHotels.isEmpty
                                      ? Center(
                                        child: Text(
                                          "No Matches Found",
                                          style: GoogleFonts.poppins(
                                            fontSize: 14,
                                            color: Colors.grey,
                                          ),
                                        ),
                                      )
                                      : SingleChildScrollView(
                                        scrollDirection: Axis.vertical,
                                        child: table,
                                      ))
                                  : (searchController.text.isNotEmpty &&
                                          filteredHotels.isEmpty
                                      ? Center(
                                        child: Text(
                                          "No Matches Found",
                                          style: GoogleFonts.poppins(
                                            fontSize: 14,
                                            color: Colors.grey,
                                          ),
                                        ),
                                      )
                                      : buildMobileCardView(paginatedHotels)),
                        ),
                        // Expanded(
                        //   child: isDesktop
                        //       ? SingleChildScrollView(
                        //           scrollDirection: Axis.vertical,
                        //           child: table, // <-- your existing table
                        //         )
                        //       : buildMobileCardView(paginatedUser),
                        // ),
                        PaginationControls(
                          currentPage: currentPage,
                          itemsPerPage: itemsPerPage,
                          totalItems: hotels.length,
                          activeColor: layoutColor, // your theme color
                          onPageChanged: (page) {
                            setState(() {
                              currentPage = page;
                            });
                          },
                          onItemsPerPageChanged: (items) {
                            setState(() {
                              itemsPerPage = items;
                              currentPage = 0;
                            });
                          },
                        ),
                      ],
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
