import React, {useState} from "react";
import { useDispatch } from "react-redux";
import { CUSTOMER_TYPE_TEXT, PERSONAL_ROUTE_STATUS, PERSONAL_ROUTE_STATUS_TEXT, PICKUP_STATUS, PICKUP_STATUS_TEXT, REPORT_TYPE, PROGRAM_TYPE_TEXT, PAY_SOURCE_TEXT } from "../../shared";
import { Modal, Button } from "react-bootstrap";
import { transRoutesSlice } from "./../../store";
import { CSVLink } from "react-csv";
import { ReportService, CustomerService } from "../../services";
import TimePicker from 'react-time-picker';
import 'react-time-picker/dist/TimePicker.css';
import moment from 'moment';
import { useNavigate } from "react-router-dom";

const PersonnelInfoTable = ({transRoutes, showCompletedInfo, 
  showGroupInfo, allowForceEdit, showFilter, 
  driverName, vehicle, relatedOutbound, 
  vehicles, isInbound, deleteFile,
  keyword, statusFilter, customerNameFilter,
  customerTableId, routeTypeFilter, customerTypeFilter,
  onRouteUpdated = null
}) => {
  const [show, setShow] = useState(false);
  const [showGroupEditor, setShowGroupEditor] = useState(false);
  const [showBulkUpdateModal, setShowBulkUpdateModal] = useState(false);
  const [customerInEdit, setCustomerInEdit] = useState(undefined);
  const [customersInEdit, setCustomersInEdit] = useState([]);
  // const [statusFilter, setStatusFilter] = useState('');
  // const [customerTypeFilter, setCustomerTypeFilter] = useState('');
  // const [customerNameFilter, setCustomerNameFilter] = useState('');
  // const [customerTableId, setCustomerTableId] = useState('');
  // const [routeTypeFilter, setRouteTypeFilter] = useState('');
  const [customerCheckInTime, setCustomerCheckInTime] = useState('');
  const [customerCheckOutTime, setCustomerCheckOutTime] = useState('');
  const [customerPickUpTime, setCustomerPickUpTime] = useState('');
  const [customerDropOffTime, setCustomerDropOffTime] = useState('');
  const [customerEstimatedPickUpTime, setCustomerEstimatedPickUpTime] = useState('');
  const [customerEstimatedDropOffTime, setCustomerEstimatedDropOffTime] = useState('');
  const [customerStatusInRoute, setCustomerStatusInRoute] = useState(false);
  const [customerPickupStatusInRoute, setCustomerPickupStatusInRoute] = useState('');
  const [customerTransferToRoute, setCustomerTransferToRoute] = useState('');
  const [customerAddressOverride, setCustomerAddressOverride] = useState('');
  const [customerAddressesList, setCustomerAddressesList] = useState([]);
  const [customerNote, setCustomerNote] = useState('');
  const [bulkEnterCenterTime, setBulkEnterCenterTime] = useState('');
  const [bulkLeaveCenterTime, setBulkLeaveCenterTime] = useState('');
  const [bulkCustomerRouteStatus, setBulkCustomerRouteStatus] = useState('');
  const [bulkCustomerPickupStatus, setBulkCustomerPickupStatus] = useState('');
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { updateRoute } = transRoutesSlice.actions;
  const params = new URLSearchParams(window.location.search);
  const scheduleDate = params.get('dateSchedule');
  // const clearFilters = () => {
  //   setStatusFilter('');
  //   setCustomerTypeFilter('');
  //   setRouteTypeFilter('');
  //   setCustomerNameFilter('');
  //   setCustomerTableId('');
  // }

  const openForceEditModal = (customer) => {
    if (allowForceEdit) {
      // CustomerService.getCustomer(customer?.customer_id).then(data => {
      //   const fullCustomer = data?.data;
      //   const result = [];
      //   if (fullCustomer?.address1 && fullCustomer?.address1 !== '') {
      //     result.push(fullCustomer?.address1);
      //   }
      //   if (fullCustomer?.address2 && fullCustomer?.address2 !== '') {
      //     result.push(fullCustomer?.address2);
      //   }
      //   if (fullCustomer?.address3 && fullCustomer?.address3 !== '') {
      //     result.push(fullCustomer?.address3);
      //   }
      //   if (fullCustomer?.address4 && fullCustomer?.address4 !== '') {
      //     result.push(fullCustomer?.address4);
      //   }
      //   if (fullCustomer?.address5 && fullCustomer?.address5 !== '') {
      //     result.push(fullCustomer?.address5);
      //   }
      //   setCustomerAddressesList(result);
      // })
      setShow(true);
      setCustomerInEdit(customer);
      setCustomerCheckInTime(customer.customer_enter_center_time ? new Date(customer.customer_enter_center_time) : '');
      setCustomerCheckOutTime(customer.customer_leave_center_time ? new Date(customer.customer_leave_center_time) : '');
      setCustomerPickUpTime(customer.customer_pickup_time ? new Date(customer.customer_pickup_time) : '');
      setCustomerDropOffTime(customer.customer_dropoff_time ? new Date(customer.customer_dropoff_time) : '');
      setCustomerEstimatedPickUpTime(customer.customer_estimated_pickup_time ? new Date(customer.customer_estimated_pickup_time) : '');
      setCustomerEstimatedDropOffTime(customer.customer_estimated_dropoff_time ? new Date(customer.customer_estimated_dropoff_time) : '');
      setCustomerStatusInRoute(customer.customer_route_status);
      setCustomerPickupStatusInRoute(customer.customer_pickup_status);
      setCustomerNote(customer?.customer_note);
    }
  }

  const goToReportWithSignature = () => {
    navigate(`/trans-routes/route-report-with-signature/${transRoutes[0]?.id}`)
  }

  const openForceEditGroupModal = (customers) => {
    if (allowForceEdit) {
      setShowGroupEditor(true);
      setCustomersInEdit(customers);
      setCustomerCheckInTime('');
      setCustomerCheckOutTime('');
      setCustomerDropOffTime('');
      setCustomerPickUpTime('');
      setCustomerStatusInRoute('');
      setCustomerEstimatedDropOffTime('');
      setCustomerEstimatedPickUpTime('');
      setCustomerAddressOverride('');
      setCustomerNote('');
    }
  }

  const closeGroupEditorModal = () => {
    setCustomersInEdit([]);
    setCustomerCheckInTime('');
    setCustomerCheckOutTime('');
    setCustomerStatusInRoute('');
    setCustomerDropOffTime('');
    setCustomerPickUpTime('');
    setCustomerEstimatedDropOffTime('');
    setCustomerEstimatedPickUpTime('');
    setCustomerNote('');
    setShowGroupEditor(false);
    
  }

  const closeModal = () => {
    setCustomerCheckInTime('');
    setCustomerCheckOutTime('');
    setCustomerDropOffTime('');
    setCustomerPickUpTime('');
    setCustomerStatusInRoute(false);
    setCustomerPickupStatusInRoute('');
    setCustomerAddressesList([]);
    setCustomerEstimatedDropOffTime('');
    setCustomerEstimatedPickUpTime('');
    setCustomerAddressOverride('');
    setCustomerNote('');
    setShow(false);
  }

  const combineDateAndTime = (date, time) => {
    const dateObj = moment(date);
    const timeObj = moment(time, 'HH:mm');
    dateObj.set({
      hour: timeObj.get('hour'),
      minute: timeObj.get('minute'),
      second: timeObj.get('second')
    })
    return dateObj;
  }

  const getDisplayNameWithProgramAndPaySource = (customer) => {
    const baseName = customer?.customer_name || '';
    const programTypeRaw = (customer?.customer_program_type || customer?.program_type || '').toString().trim();
    const paySourceRaw = (customer?.customer_pay_source || customer?.pay_source || '').toString().trim();

    const qualifiers = [];
    if (programTypeRaw && programTypeRaw.toLowerCase() !== 'amdc') {
      qualifiers.push(PROGRAM_TYPE_TEXT[programTypeRaw] || programTypeRaw);
    }
    if (paySourceRaw && paySourceRaw.toLowerCase() !== 'medicaid') {
      qualifiers.push(PAY_SOURCE_TEXT[paySourceRaw] || paySourceRaw);
    }

    if (qualifiers.length === 0) return baseName;
    return `${baseName} (${qualifiers.join(', ')})`;
  };

  const saveRouteCustomerInfo = () => {
    const routeId = customerInEdit.routeId;
    let removeSignature = false
    if (routeId) {
      let requestBody = transRoutes.find((route) => route.id === routeId);
      const dateStr = requestBody?.schedule_date || '';
      const newCustomerList = requestBody.route_customer_list.map((item) => {
        let addedFields = {};
        if (item.customer_id === customerInEdit.customer_id) {
          if (customerCheckInTime && customerCheckInTime !== '') {
            addedFields.customer_enter_center_time = combineDateAndTime(dateStr, customerCheckInTime);
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.IN_CENTER;
          } else {
            addedFields.customer_enter_center_time = null;
          }
          if (customerCheckOutTime && customerCheckOutTime !=='') {
            addedFields.customer_leave_center_time = combineDateAndTime(dateStr, customerCheckOutTime);
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.LEFT_CENTER;
          } else {
            addedFields.customer_leave_center_time = null;
          }
          if (customerPickUpTime && customerPickUpTime !=='') {
            addedFields.customer_pickup_time = combineDateAndTime(dateStr, customerPickUpTime);
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.PICKED;
            removeSignature = true;
          } else {
            addedFields.customer_pickup_time = null;
          }
          if (customerDropOffTime && customerDropOffTime !=='') {
            addedFields.customer_dropoff_time = combineDateAndTime(dateStr, customerDropOffTime);
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.DROPPED_OFF;
            removeSignature = true;
          } else {
            addedFields.customer_dropoff_time = null;
          }
          if (customerEstimatedPickUpTime && customerEstimatedPickUpTime !=='') {
            addedFields.customer_estimated_pickup_time = combineDateAndTime(dateStr, customerEstimatedPickUpTime);
          } else {
            addedFields.customer_estimated_pickup_time = null;
          }
          // if (customerEstimatedDropOffTime && customerEstimatedDropOffTime !=='') {
          //   addedFields.customer_estimated_dropoff_time = customerEstimatedDropOffTime;
          // }
          if (customerAddressOverride && customerAddressOverride !=='') {
            addedFields.customer_address_override = customerAddressOverride;
          }
          if (customerStatusInRoute) {
            addedFields.customer_route_status = customerStatusInRoute;
          } else {
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.NO_STATUS;
          }
          if (customerPickupStatusInRoute && customerPickupStatusInRoute !=='') {
            addedFields.customer_pickup_status = customerPickupStatusInRoute;
          }
          if (customerTransferToRoute && customerTransferToRoute !=='') {
            addedFields.customer_transfer_to_route = customerTransferToRoute;
          }
          if (customerNote && customerNote !== '') {
            addedFields.customer_note = customerNote;
          }
        }
        return Object.assign({}, item, addedFields);;
      })
      requestBody = Object.assign({}, requestBody, {route_customer_list: newCustomerList, updatedAt: new Date(), updatedBy: 'admin'});
      let finalParams = { id: routeId, data: requestBody };
      if (scheduleDate) {
        finalParams = Object.assign({}, finalParams, {dateText: moment(scheduleDate).format('MM/DD/YYYY'), fromSchedule: true})
      }
      if (dateStr !== '' && dateStr !== moment().format('MM/DD/YYYY')) {
        finalParams = Object.assign({}, finalParams, {dateText: dateStr})
      }
      if (onRouteUpdated) {
        finalParams = Object.assign({}, finalParams, {callback: onRouteUpdated})
      }
      dispatch(updateRoute(finalParams));
      // if (removeSignature && deleteFile) {
      //   deleteFile();
      // }
    } else {
      window.alert('Fail to update Route: no route Id is attached to this customer.')
    }
    setShow(false);
  }

  const saveRouteGroupCustomerInfo = () => {
    const routeId = customersInEdit[0]?.routeId;
    let removeSignature = false
    if (routeId) {
      let requestBody = transRoutes.find((route) => route.id === routeId);
      const dateStr = requestBody?.schedule_date || '';
      const newCustomerList = requestBody.route_customer_list.map((item) => {
        let addedFields = {};
        if (customersInEdit?.find((customerItem) => customerItem.customer_id === item.customer_id)) {
          if (customerCheckInTime && customerCheckInTime !== '') {
            addedFields.customer_enter_center_time = combineDateAndTime(dateStr, customerCheckInTime);
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.IN_CENTER;
          }
          if (customerCheckOutTime && customerCheckOutTime !=='') {
            addedFields.customer_leave_center_time = combineDateAndTime(dateStr, customerCheckOutTime);
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.LEFT_CENTER;
          }
          if (customerPickUpTime && customerPickUpTime !=='') {
            addedFields.customer_pickup_time = combineDateAndTime(dateStr, customerPickUpTime);
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.PICKED;
            removeSignature = true;
          }
          if (customerDropOffTime && customerDropOffTime !=='') {
            addedFields.customer_dropoff_time = combineDateAndTime(dateStr, customerDropOffTime);
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.DROPPED_OFF;
            removeSignature = true;
          }
          if (customerStatusInRoute) {
            addedFields.customer_route_status = customerStatusInRoute;
          } else {
            addedFields.customer_route_status = PERSONAL_ROUTE_STATUS.NO_STATUS;
          }
        }
        return Object.assign({}, item, addedFields);;
      })
      requestBody = Object.assign({}, requestBody, {route_customer_list: newCustomerList, updatedAt: new Date(), updatedBy: 'admin'});
      let finalParams = { id: routeId, data: requestBody };
      if (scheduleDate) {
        finalParams = Object.assign({}, finalParams, {dateText: moment(scheduleDate).format('MM/DD/YYYY'), fromSchedule: true})
      }
      if (dateStr !== '' && dateStr !== moment().format('MM/DD/YYYY')) {
        finalParams = Object.assign({}, finalParams, {dateText: dateStr})
      }
      if (onRouteUpdated) {
        finalParams = Object.assign({}, finalParams, {callback: onRouteUpdated})
      }
      dispatch(updateRoute(finalParams));
      // if (removeSignature && deleteFile) {
      //   deleteFile();
      // }
      // dispatch(updateRoute({ id: routeId, data: requestBody }))
    } else {
      window.alert('Fail to update Route: no route Id is attached to this customer.')
    }
    setShowGroupEditor(false);
  }

  // const getAllRoutesCustomersStatus = (routes) => {
  //   const result = {};
  //   for (const route of routes) {
  //     for (const customer of route.route_customer_list) {
  //       if ((!showGroupInfo && customer.customer_route_status !== PERSONAL_ROUTE_STATUS.DISABLED) || showGroupInfo) {
  //         if (result.hasOwnProperty(customer.customer_id)) {
  //           result[customer.customer_id] = Object.assign(
  //             {},
  //             result[customer.customer_id],
  //             customer,
  //             route.type === 'inbound' ? { inboundStatus: customer.customer_route_status, inboundRoute: route.id} : {},
  //             route.type === 'outbound' ? { outboundStatus: customer.customer_route_status, outboundRoute: route.id} : {},
  //             customer.customer_pickup_status === PICKUP_STATUS.SCHEDULE_ABSENT ? { inboundStatus: PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT, outboundStatus: PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT} : {});
            
  //         } else {
  //           result[customer.customer_id] = Object.assign(
  //             {},
  //             customer,
  //             route.type === 'inbound' ? { inboundStatus: customer.customer_route_status, inboundRoute: route.id, outboundStatus: null, outboundRoute: null} : {},
  //             route.type === 'outbound' ? { outboundStatus: customer.customer_route_status, outboundRoute: route.id, inboundRoute: null, inboundStatus: null} : {},
  //             customer.customer_pickup_status === PICKUP_STATUS.SCHEDULE_ABSENT ? { inboundStatus: PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT, outboundStatus: PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT} : {});
  //         }
  //       }
  //     }
  //   }
  //   console.log(result);
  //   return result;
  // };

  // const getTextAndClassName = (customer) => {
  //   if (customer.outboundStatus) {
  //     return PERSONAL_ROUTE_STATUS_TEXT[customer.outboundStatus];
  //   } else {
  //     if (customer.inboundStatus) {
  //       return PERSONAL_ROUTE_STATUS_TEXT[customer.inboundStatus];
  //     }
  //   }
  //   return PERSONAL_ROUTE_STATUS_TEXT[PERSONAL_ROUTE_STATUS.NO_STATUS];
  // };

  const getAllCustomers = (routes) => {
    let result = [];
    for (const route of routes) {
      const customerList = route.route_customer_list.map(item => Object.assign({}, item, {routeType: route.type, routeId: route.id, route: route}))
      result = result.concat(customerList);
    }
    return result.sort((a, b) => {
      if (a.customer_id < b.customer_id) {
        return -1;
      } else {
        return 1;
      }
    });
  }

  const getRouteCustomersWithGroups = () => {
    const customerList = transRoutes[0]?.route_customer_list.map((item, index )=> Object.assign({}, item, {routeType: transRoutes[0].type, routeId: transRoutes[0].id}, {index: index+1}));
    const result = {};
    if (customerList) {
      for (const customer of customerList) {
        if (customer.customer_group) {
          if (result[customer.customer_group]) {
            result[customer.customer_group].push(customer);
          } else {
            result[customer.customer_group] = [];
            result[customer.customer_group].push(customer);
          }
        } else {
          if (result.no_group) {
            result.no_group.push(customer);
          } else {
            result.no_group = [];
            result.no_group.push(customer);
          }
        }
      }
    }
    return result;
  }

  const getSortedFormItems = () => {
    const result = getRouteCustomersWithGroups();
    let finalResult = [];
		for (const key of Object.keys(result)) {
			if (key === 'no_group') {
				finalResult = finalResult.concat(result[key]);
			} else {
				finalResult.push({
					customer_pickup_order: result[key][0].customer_pickup_order,
					customer_group: key,
					customers: result[key]
				})
			}
		}
		return finalResult.sort((a, b) => a.customer_pickup_order - b.customer_pickup_order);
  }

  const getTextAndClassName = (customer) => {
    if (customer.customer_pickup_status === PICKUP_STATUS.SCHEDULE_ABSENT) {
      return PERSONAL_ROUTE_STATUS_TEXT[PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT];
    }
    if (customer.customer_route_status) {
      return PERSONAL_ROUTE_STATUS_TEXT[customer.customer_route_status];
    }
    return PERSONAL_ROUTE_STATUS_TEXT[PERSONAL_ROUTE_STATUS.NO_STATUS];
  }

  const getDisplayPickupOrder = (pickupOrder) => {
    if (pickupOrder === undefined || pickupOrder === null || pickupOrder === '') {
      return '';
    }
    const numericValue = Number(pickupOrder);
    if (Number.isNaN(numericValue)) {
      return pickupOrder;
    }
    return numericValue + 1;
  }

  const generateRouteReportData = () => {
    const title = ['', '', `Route(路线): ${transRoutes[0].name}    Driver(司机): ${driverName}     Vehicle(车号): ${vehicle?.vehicle_number}    Date(日期): ${transRoutes[0]?.schedule_date}`]
    const signature = ['', '', `Driver's Signature(司机签字): ________________________         Manager's Signature(经理签字): ______________________`]
    const head = ['No.', 'Name',  'Address', 'Phone', 'Show-Up', 'Pick-Up', 'Arrival', 'Departure', 'Drop-Off', 'Notice', 'Member Type', 'Vehicle Number'];
    const chineseHead=['序号', '姓名', '地址', '联系电话', '出勤', '接到时间', '抵达中心', '离开中心', '送达时间', '备注', '用户类别', '车号', ];
    const content = [];
    const customersList = getSortedFormItems();
    let index = 1;
    for (let i=0; i<customersList.length; i++) {
      if (!customersList[i].customers) {
        content.push([index, customersList[i].customer_name, customersList[i].customer_address_override || customersList[i].customer_address, customersList[i].customer_phone, customersList[i].customer_enter_center_time? 'Y': 'N', customersList[i].customer_pickup_time, customersList[i].customer_enter_center_time, customersList[i].customer_leave_center_time, customersList[i].customer_dropoff_time, customersList[i].customer_note, customersList[i].customer_type, vehicle?.vehicle_number]);
        index++;
      } else {
        content.push(['', customersList[i].customer_group, customersList[i].customers[0].customer_group_address]);
        for (const customer of customersList[i].customers) {
          content.push([index, customer.customer_name, customer.customer_address_override || customer.customer_address, customer.customer_phone, customer.customer_enter_center_time? 'Y': 'N', customer.customer_pickup_time, customer.customer_enter_center_time, customer.customer_leave_center_time, customer.customer_dropoff_time, customer.customer_note,customer.customer_type, vehicle?.vehicle_number]);
          index++;
        }
      }
    }
    const itemsTitle = ['', 'Items', 'Inspected Result'];
    const checklist = [];
    transRoutes[0]?.checklist_result?.forEach((item) => {
      checklist.push(['', item.item, item.result ? 'Y' : 'N']);
    })
    return [title, signature, head, chineseHead, ...content, itemsTitle, ...checklist];
  }

  const generateInboundSeniorsReportData = () => {
    const head = ['No.', 'Name', 'Show-Up', 'Vehicle Number'];
    const chineseHead=['序号', '姓名', '出勤', '车号'];
    const content = [];
    let index = 1;
    const customersList = getAllCustomers(transRoutes.filter(route => route.type === 'inbound'))?.filter(customer => (customer.customer_pickup_status !== PICKUP_STATUS.SCHEDULE_ABSENT) && (![PERSONAL_ROUTE_STATUS.NO_STATUS, PERSONAL_ROUTE_STATUS.UNEXPECTED_ABSENT, PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT].includes(customer.customer_route_status)));
    for (let i=0; i<customersList.length; i++) {
      content.push([index, customersList[i].customer_name, customersList[i].customer_route_status !== PERSONAL_ROUTE_STATUS.DISABLED ? 'Y': 'N', vehicles?.find(item => item?.id === customersList[i]?.route?.vehicle)?.vehicle_number]);
      index++;
    }
    const finalNumber = ['Participants Arrived:', customersList.filter(customer => customer.customer_route_status!== PERSONAL_ROUTE_STATUS.DISABLED)?.length];
    return [head, chineseHead, ...content, finalNumber ];
  }

  const generateSeniorTimeReport = () => {
    const customersList = getAllCustomers(transRoutes.filter(route => route.type === 'inbound'));
    const content = [];
    let outboundCustomerList = [];
    for (const outboundRoute of relatedOutbound) {
      outboundCustomerList = outboundCustomerList.concat(outboundRoute.route_customer_list)
    }
    const outboundMap = new Map();
    for (const outboundCustomer of outboundCustomerList) {
      outboundMap.set(outboundCustomer.customer_id, outboundCustomer);
    }
    for (const customer of customersList) {
      const element = {
        index: customersList.indexOf(customer)+1,
        customer_name: customer.customer_name,
        customer_enter_center_time: customer.customer_enter_center_time,
        customer_pickup_time: customer.customer_pickup_time,
        customer_leave_center_time: outboundMap.get(customer.customer_id)?.customer_leave_center_time,
        customer_dropoff_time: outboundMap.get(customer.customer_id)?.customer_dropoff_time,
        customer_address: customer.customer_address_override || customer.customer_address,
        customer_phone: customer.customer_phone,
        customer_note: customer.customer_note,
        customer_type: customer.customer_type,
        vehicle_number: vehicle?.vehicle_number
      }
      content.push(element);
    }
    ReportService.getReportsByRouteIdAndType(transRoutes[0].id, REPORT_TYPE.SENIOR_CONSOLIDATE_REPORT).then(data=> {
      if (data.data && data.data.length > 0) {
        ReportService.updateReport(data.data[0].id, {type: REPORT_TYPE.SENIOR_CONSOLIDATE_REPORT, driver_name: driverName, vehicle_number: vehicle?.vehicle_number, checklist_result: transRoutes[0]?.checklist_result, route_id: transRoutes[0].id, route_name: transRoutes[0].name, date: transRoutes[0].schedule_date, data: content, head: ['No.', 'Name', 'Phone', 'Address', 'Pickup Time', 'Enter Center Time', 'Leave Center Time', 'Drop Off Time', 'Note', 'Member Type', 'Vehicle Number'], chinese_head: ['序号', '姓名', '电话', '地址', '接到时间', '进入中心时间', '离开中心时间', '送达时间', '备注', '用户类别', '车号']}).then(() => {
          window.alert('The report is saved to Database. To get a PDF version, please run your PYTHON EXE Script.')
        });
      } else {
        ReportService.createReport({type: REPORT_TYPE.SENIOR_CONSOLIDATE_REPORT, driver_name: driverName, route_id: transRoutes[0].id, vehicle_number: vehicle?.vehicle_number, checklist_result: transRoutes[0]?.checklist_result, route_name: transRoutes[0].name, date: transRoutes[0].schedule_date, data: content, head: ['No.', 'Name', 'Phone', 'Address', 'Pickup Time', 'Enter Center Time', 'Leave Center Time', 'Drop Off Time', 'Note', 'Member Type', 'Vehicle Number' ], chinese_head: ['序号', '姓名', '电话', '地址', '接到时间', '进入中心时间', '离开中心时间', '送达时间', '备注', '用户类别', '车号' ]}).then(() => {
          window.alert('The report is saved to Database. To get a PDF version, please run your PYTHON EXE Script.')
        });
      }
    })
  }

  const openBulkUpdateModal = () => {
    setShowBulkUpdateModal(true);
    setBulkEnterCenterTime('');
    setBulkLeaveCenterTime('');
    setBulkCustomerRouteStatus('');
    setBulkCustomerPickupStatus('');
  }

  const closeBulkUpdateModal = () => {
    setShowBulkUpdateModal(false);
    setBulkEnterCenterTime('');
    setBulkLeaveCenterTime('');
    setBulkCustomerRouteStatus('');
    setBulkCustomerPickupStatus('');
  }

  const saveBulkUpdate = () => {
    const routeId = transRoutes[0]?.id;
    
    // Debug logging
    console.log('=== saveBulkUpdate Debug ===');
    console.log('bulkEnterCenterTime:', bulkEnterCenterTime);
    console.log('bulkEnterCenterTime type:', typeof bulkEnterCenterTime);
    console.log('bulkEnterCenterTime value:', JSON.stringify(bulkEnterCenterTime));
    console.log('bulkLeaveCenterTime:', bulkLeaveCenterTime);
    console.log('bulkLeaveCenterTime type:', typeof bulkLeaveCenterTime);
    console.log('bulkLeaveCenterTime value:', JSON.stringify(bulkLeaveCenterTime));
    
    if (routeId) {
      let requestBody = transRoutes.find((route) => route.id === routeId);
      const dateStr = requestBody?.schedule_date || '';
      
      console.log('dateStr:', dateStr);
      console.log('Number of customers to update:', requestBody.route_customer_list.length);
      console.log('Original customer list IDs:', requestBody.route_customer_list.map(c => ({ id: c.customer_id, name: c.customer_name, pickup_status: c.customer_pickup_status })));
      
      const updatedCustomerList = requestBody.route_customer_list.map((item) => {
        // Skip customers who are Unscheduled Absent or Scheduled Absent
        // Only skip if status is explicitly set to one of these values (not undefined)
        if (item.customer_pickup_status && 
            (item.customer_pickup_status === PICKUP_STATUS.UNSCHEDULE_ABSENT || 
             item.customer_pickup_status === PICKUP_STATUS.SCHEDULE_ABSENT)) {
          console.log(`Skipping customer ${item.customer_id} (${item.customer_name}) - status: ${item.customer_pickup_status}`);
          return item;
        }

        let updatedItem = { ...item };
        
        // Debug logging for each customer
        console.log(`Processing customer ${item.customer_id} (${item.customer_name})`);
        
        // Check if bulkEnterCenterTime is a valid time string (HH:mm format)
        console.log('Checking bulkEnterCenterTime:', {
          value: bulkEnterCenterTime,
          type: typeof bulkEnterCenterTime,
          isTruthy: !!bulkEnterCenterTime,
          isString: typeof bulkEnterCenterTime === 'string',
          trimmed: typeof bulkEnterCenterTime === 'string' ? bulkEnterCenterTime.trim() : 'N/A',
          trimmedLength: typeof bulkEnterCenterTime === 'string' ? bulkEnterCenterTime.trim().length : 0
        });
        
        if (bulkEnterCenterTime && typeof bulkEnterCenterTime === 'string' && bulkEnterCenterTime.trim() !== '') {
          try {
            const combinedTime = combineDateAndTime(dateStr, bulkEnterCenterTime);
            const dateValue = combinedTime.toDate();
            console.log('Combined enter center time (moment):', combinedTime);
            console.log('Combined enter center time (Date):', dateValue);
            updatedItem.customer_enter_center_time = dateValue;
            // Don't automatically update status when setting time
            console.log(`Set customer_enter_center_time for ${item.customer_name} to:`, updatedItem.customer_enter_center_time);
          } catch (e) {
            console.error('Error combining date and enter center time:', e);
          }
        } else {
          console.log('Skipping bulkEnterCenterTime - condition not met');
        }
        
        // Check if bulkLeaveCenterTime is a valid time string (HH:mm format)
        console.log('Checking bulkLeaveCenterTime:', {
          value: bulkLeaveCenterTime,
          type: typeof bulkLeaveCenterTime,
          isTruthy: !!bulkLeaveCenterTime,
          isString: typeof bulkLeaveCenterTime === 'string',
          trimmed: typeof bulkLeaveCenterTime === 'string' ? bulkLeaveCenterTime.trim() : 'N/A',
          trimmedLength: typeof bulkLeaveCenterTime === 'string' ? bulkLeaveCenterTime.trim().length : 0
        });
        
        if (bulkLeaveCenterTime && typeof bulkLeaveCenterTime === 'string' && bulkLeaveCenterTime.trim() !== '') {
          try {
            const combinedTime = combineDateAndTime(dateStr, bulkLeaveCenterTime);
            const dateValue = combinedTime.toDate();
            console.log('Combined leave center time (moment):', combinedTime);
            console.log('Combined leave center time (Date):', dateValue);
            updatedItem.customer_leave_center_time = dateValue;
            // Don't automatically update status when setting time
            console.log(`Set customer_leave_center_time for ${item.customer_name} to:`, updatedItem.customer_leave_center_time);
          } catch (e) {
            console.error('Error combining date and leave center time:', e);
          }
        } else {
          console.log('Skipping bulkLeaveCenterTime - condition not met');
        }
        
        console.log(`Final updatedItem for ${item.customer_name}:`, {
          customer_id: updatedItem.customer_id,
          customer_enter_center_time: updatedItem.customer_enter_center_time,
          customer_leave_center_time: updatedItem.customer_leave_center_time
        });

        if (bulkCustomerRouteStatus && bulkCustomerRouteStatus !== '') {
          updatedItem.customer_route_status = bulkCustomerRouteStatus;
        }

        if (bulkCustomerPickupStatus && bulkCustomerPickupStatus !== '') {
          updatedItem.customer_pickup_status = bulkCustomerPickupStatus;
        }
        
        return updatedItem;
      });

      requestBody = Object.assign({}, requestBody, {route_customer_list: updatedCustomerList, updatedAt: new Date(), updatedBy: 'admin'});
      
      // Debug: Log all customers from updated list
      console.log('=== All Updated Customers ===');
      updatedCustomerList.forEach((customer, index) => {
        console.log(`Customer ${index + 1}:`, {
          customer_id: customer.customer_id,
          customer_name: customer.customer_name,
          pickup_status: customer.customer_pickup_status,
          customer_enter_center_time: customer.customer_enter_center_time,
          customer_leave_center_time: customer.customer_leave_center_time
        });
      });
      
      let finalParams = { id: routeId, data: requestBody };
      if (scheduleDate) {
        finalParams = Object.assign({}, finalParams, {dateText: moment(scheduleDate).format('MM/DD/YYYY'), fromSchedule: true})
      }
      if (dateStr !== '' && dateStr !== moment().format('MM/DD/YYYY')) {
        finalParams = Object.assign({}, finalParams, {dateText: dateStr})
      }
      if (onRouteUpdated) {
        finalParams = Object.assign({}, finalParams, {callback: onRouteUpdated})
      }
      
      // Log final payload before dispatch, especially for Wang,Huanran
      const wangCustomer = finalParams.data.route_customer_list?.find(c => 
        c.customer_id === '63657acff745ffd72affb8d8' || c.customer_name?.includes('Wang,Huanran')
      );
      console.log('Wang,Huanran customer in final payload:', wangCustomer);
      console.log('Final params being dispatched:', {
        id: finalParams.id,
        data_keys: Object.keys(finalParams.data),
        customer_count: finalParams.data.route_customer_list?.length
      });
      
      // Stringify to see what would actually be sent (Date serialization)
      try {
        const stringified = JSON.stringify(finalParams.data.route_customer_list?.slice(0, 2));
        console.log('Sample serialized customer list (first 2):', stringified);
      } catch (e) {
        console.error('Error stringifying:', e);
      }
      
      console.log('=== End saveBulkUpdate Debug ===');
      
      dispatch(updateRoute(finalParams));
    } else {
      window.alert('Fail to update Route: no route Id found.')
    }
    closeBulkUpdateModal();
  }

  return (
    <>
      {!showGroupInfo && (<div className="list row mb-4">
        <div className="col-md-12">
        <CSVLink className="btn btn-primary btn-sm btn-no-deco" data={generateInboundSeniorsReportData()} filename={`Route Inbound Customers Show-up Report`}>
          Generate Inbound Participants Report
        </CSVLink>
        </div>
      </div>)}
      {showGroupInfo && (<div className="list row mb-4">
        <div className="col-md-12">
          <CSVLink className="btn btn-primary btn-no-deco btn-sm me-2" data={generateRouteReportData()} filename={`Route Report - ${transRoutes[0].name} (定线出车单)`}>
            Generate Route Reports
          </CSVLink>
          <button className="btn btn-primary btn-sm me-2" onClick={() => goToReportWithSignature()}>Get Route Report With Signature</button>
          <button className="btn btn-primary btn-sm" onClick={() => openBulkUpdateModal()}>Bulk Update Route Customer Time</button>
        </div>
          
      </div>)}
      
      {/* {showFilter && (<div>
        <h6>Filter:</h6>
        <div className="list row">
          <div className="col-md-6 col-sm-6 col-xs-12 mb-4">
            Participant Status: <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
            >
              {
                [['', {text: ''}], ...Object.entries(PERSONAL_ROUTE_STATUS_TEXT)].map(([key, {text}]) => (
                  <option key={key} value={key}>{text}</option>
                ))
              }
            </select>
          </div>
          <div className="col-md-6 col-sm-6 col-xs-12 mb-4 ml-4">
            Participant  Type: <select
              value={customerTypeFilter}
              onChange={(e) => setCustomerTypeFilter(e.target.value)}
            >
              {
                [['', ''], ...Object.entries(CUSTOMER_TYPE_TEXT)].map(([key, text]) => (
                  <option key={key} value={key}>{text}</option>
                ))
              }
            </select>
          </div>
          <div className="col-md-6 col-sm-6 col-xs-12 mb-4">
            Routes Type: <select
              value={routeTypeFilter}
              onChange={(e) => setRouteTypeFilter(e.target.value)}
            >
              <option value=""></option>
              <option value="inbound">inbound</option>
              <option value="outbound">outbound</option>
            </select>
          </div>
          <div className="col-md-6 col-sm-6 col-xs-12 mb-4">
            Participant Name: <input type="text" value={customerNameFilter} onChange={(e) => setCustomerNameFilter(e.target.value)} />
          </div>
          <div className="col-md-6 col-sm-6 col-xs-12 mb-4">
            Table Id: <input type="text" value={customerTableId} onChange={(e) => setCustomerTableId(e.target.value)} />
          </div>
          <div className="col-md-12 col-sm-12 col-xs-12 mb-4">
            <button className="btn btn-primary" onClick={() => clearFilters()}>Clear Filters</button>
          </div>
        </div>
      </div>)} */}
      <div className="list row">
        <div className="col-md-12 overflow-auto">
          <table className="personnel-info-table">
            <thead>
              <tr>
                <th className="th-index">No.</th>
                <th>Name</th>
                {showCompletedInfo && (<th>Address</th>)}
                {showCompletedInfo && (<th>Tel</th>)}
                <th>Status</th>
                <th>Type</th>
                {!showCompletedInfo &&<th>Route Type</th>}
                <th>Pick Up Time</th>
                <th>Enter Center Time</th>
                <th>Leave Center Time</th>
                <th>Drop Off Time</th>
                {showCompletedInfo && (<th>Schedule Absent</th>)}
                {showCompletedInfo && (<th>Note</th>)}
                {showCompletedInfo && (<th>Pickup Order</th>)}
                {showCompletedInfo && (<th>Estimated Pickup Time</th>)}
                {!showCompletedInfo && (<th>Vehicle Number</th>)}
                {allowForceEdit && <th>Edit</th>}
              </tr>
            </thead>
            <tbody>
              {!showGroupInfo && getAllCustomers(transRoutes)
                .filter((item) => {
                  const filterHasValue = (filterField) => filterField && filterField.length > 0
                  let result1 = true;
                  let result2 = true;
                  let result3 = true;
                  let result4 = true;
                  let result5 = true;
                  if (filterHasValue(statusFilter) && getTextAndClassName(item)?.text !== PERSONAL_ROUTE_STATUS_TEXT[statusFilter]?.text) {
                    result1 = false;
                  } else {
                    result1 = true;
                  }
                  if ((filterHasValue(customerTypeFilter) && item.customer_type !== customerTypeFilter)) {
                    result2 = false;
                  } else {
                    result2 = true;
                  }
                  if (filterHasValue(routeTypeFilter) && item.routeType !== routeTypeFilter) {
                    result3 = false;
                  } else {
                    result3 = true;
                  }
                  if (filterHasValue(customerNameFilter) && !item.customer_name?.toLowerCase().includes(customerNameFilter.toLowerCase()) ) {
                    result4 = false;
                  } else {
                    result4 = true;
                  }
                  if (filterHasValue(customerTableId) && item.customer_table_id !== customerTableId) {
                    result5 = false;
                  } else {
                    result5 = true;
                  }
                  return result1&&result2&&result3&&result4&&result5;
                })
                //.filter((item) => item?.customer_name?.includes(keyword) || getTextAndClassName(item)?.text?.includes(keyword) || item?.customer_type?.includes(keyword) || item?.table_id?.includes(keyword))
                .sort((a, b) => a.customer_name.replace(' ', '') > b.customer_name.replace(' ', '') ? 1: -1 )
                .map((customer, index) => {
                  return (<tr key={index}>
                    <td className="td-index"> {index + 1}</td>
                    <td>
                      { getDisplayNameWithProgramAndPaySource(customer)}
                    </td>
                    {showCompletedInfo && (<td>
                      { customer.customer_address_override || customer.customer_address }
                    </td>)}
                    {showCompletedInfo && (<td>
                      { customer.customer_phone }
                    </td>)}
                    <td>
                      <div className={`${getTextAndClassName(customer).className} status-tag`}>{ getTextAndClassName(customer).text } </div>
                    </td>
                    <td>
                      { CUSTOMER_TYPE_TEXT[customer.customer_type]}
                    </td>
                    {!showCompletedInfo &&  <td>
                      { customer.routeType}
                    </td>}
                    <td>{customer.customer_pickup_time && new Date(customer.customer_pickup_time).toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'})}</td>
										<td>{customer.customer_enter_center_time && new Date(customer.customer_enter_center_time).toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'})}</td>
										<td>{customer.customer_leave_center_time && new Date(customer.customer_leave_center_time).toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'})}</td>
									  <td>{customer.customer_dropoff_time && new Date(customer.customer_dropoff_time).toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'})}</td>
                    {showCompletedInfo && (<td>
                      { customer.customer_pickup_status === PICKUP_STATUS.SCHEDULE_ABSENT ? 'Yes' : "No" }
                    </td>)}
                    {showCompletedInfo && (<td>
                      { customer.customer_special_needs }
                    </td>)}
                    {showCompletedInfo && (<td>
                      { getDisplayPickupOrder(customer.customer_pickup_order) }
                    </td>)}
                    {showCompletedInfo && (<td>
                      { customer.customer_estimated_pickup_time ? new Date(customer.customer_estimated_pickup_time).toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'}) : '' }
                    </td>)}
                    {!showCompletedInfo && (<td>
                      { vehicle?.vehicle_number || vehicles?.find((item) => item?.id === customer?.route?.vehicle)?.vehicle_number }
                    </td>)}
                    {allowForceEdit && (<td>
                      <button className="btn btn-link btn-sm" onClick={() => openForceEditModal(customer)}>Edit</button>
                    </td>)}
                    
                  </tr>)
                })}

              {showGroupInfo && (() => {
                let stopNo = 0;
                return getSortedFormItems()
                .map((customerItem, index) => {
                  if (!customerItem.customer_group) {
                    stopNo += 1;
                    return (<tr key={index} >
                      <td className="td-index">{stopNo}</td>
                      <td>
                        { getDisplayNameWithProgramAndPaySource(customerItem)}
                      </td>
                      {showCompletedInfo && (<td>
                        { customerItem.customer_address_override || customerItem.customer_address }
                      </td>)}
                      {showCompletedInfo && (<td>
                        { customerItem.customer_phone }
                      </td>)}
                      <td> <div className={`${getTextAndClassName(customerItem).className} status-tag`}>
                        { getTextAndClassName(customerItem).text } </div>
                      </td>
                      <td>
                        { CUSTOMER_TYPE_TEXT[customerItem.customer_type]}
                      </td>
                      {!showCompletedInfo && <td>
                        { customerItem.routeType}
                      </td>}
                      <td>{customerItem.customer_pickup_time && new Date(customerItem.customer_pickup_time).toLocaleTimeString('en-US', {hour12: false})}</td>
                      <td>{customerItem.customer_enter_center_time && new Date(customerItem.customer_enter_center_time).toLocaleTimeString('en-US', {hour12: false})}</td>
                      <td>{customerItem.customer_leave_center_time && new Date(customerItem.customer_leave_center_time).toLocaleTimeString('en-US', {hour12: false})}</td>
                      <td>{customerItem.customer_dropoff_time && new Date(customerItem.customer_dropoff_time).toLocaleTimeString('en-US', {hour12: false})}</td>
                      {showCompletedInfo && (<td>
                        { customerItem.customer_pickup_status === PICKUP_STATUS.SCHEDULE_ABSENT ? 'Yes' : "No" }
                      </td>)}
                      {showCompletedInfo && (<td>
                        { customerItem.customer_special_needs }
                      </td>)}
                      {showCompletedInfo && (<td>
                        { getDisplayPickupOrder(customerItem.customer_pickup_order) }
                      </td>)}
                      {showCompletedInfo && (<td>
                        { customerItem.customer_estimated_pickup_time ? new Date(customerItem.customer_estimated_pickup_time).toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'}) : '' }
                      </td>)}
                      {!showCompletedInfo && (<td>
                        { vehicle?.vehicle_number }
                      </td>)}
                      {allowForceEdit && <td>
                        <button className="btn btn-link btn-sm" onClick={() => openForceEditModal(customerItem)}>Edit</button>
                      </td>}
                    </tr>);
                  } else {
                    stopNo += 1;
                    const groupedRowsStyle = { backgroundColor: '#f3f3f3' };
                    return (<React.Fragment key={index}>
                        <tr className="group" style={groupedRowsStyle}>
                          <td className="td-index">{stopNo}</td>
                          <td>{customerItem.customer_group}</td>
                          <td colSpan={showCompletedInfo? 11: 3}>{customerItem.customers[0]?.customer_group_address}</td>
                          {allowForceEdit && <td>
                           <button className="btn btn-link btn-sm" onClick={() => openForceEditGroupModal(customerItem.customers)}>Edit Group</button>
                          </td>}
                        </tr>
                        {
                          customerItem.customers?.map((customer) => (<tr key={customer.customer_id} style={groupedRowsStyle} onClick={() => openForceEditModal(customer)}>
                            <td className="td-index"></td>
                            <td className="children">
                              { getDisplayNameWithProgramAndPaySource(customer)}
                            </td>
                            {showCompletedInfo && (<td>
                              { customer.customer_address_override || customer.customer_address }
                            </td>)}
                            {showCompletedInfo && (<td>
                            { customer.customer_phone }
                            </td>)}
                            <td> <div className={`${getTextAndClassName(customer).className} status-tag`}>
                              { getTextAndClassName(customer).text } </div>
                            </td>
                            <td>
                              { CUSTOMER_TYPE_TEXT[customer.customer_type]}
                            </td>
                            {!showCompletedInfo && <td>
                              { customer.routeType}
                            </td>}
                            <td>{customer.customer_pickup_time && new Date(customer.customer_pickup_time).toLocaleTimeString('en-US', {hour12: false})}</td>
                            <td>{customer.customer_enter_center_time && new Date(customer.customer_enter_center_time).toLocaleTimeString('en-US', {hour12: false})}</td>
                            <td>{customer.customer_leave_center_time && new Date(customer.customer_leave_center_time).toLocaleTimeString('en-US', {hour12: false})}</td>
                            <td>{customer.customer_dropoff_time && new Date(customer.customer_dropoff_time).toLocaleTimeString('en-US', {hour12: false})}</td>
                            {showCompletedInfo && (<td>
                              { customer.customer_pickup_status === PICKUP_STATUS.SCHEDULE_ABSENT ? 'Yes' : "No" }
                            </td>)}
                            {showCompletedInfo && (<td>
                              { customer.customer_special_needs }
                            </td>)}
                            {showCompletedInfo && (<td>
                              { getDisplayPickupOrder(customer.customer_pickup_order) }
                            </td>)}
                            {showCompletedInfo && (<td>
                              { customer.customer_estimated_pickup_time ? new Date(customer.customer_estimated_pickup_time).toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'}) : '' }
                            </td>)}
                            {!showCompletedInfo && (<td>
                              { vehicle?.vehicle_number }
                            </td>)}
                            {allowForceEdit && <td>
                              <button className="btn btn-link btn-sm" onClick={() => openForceEditModal(customer)}>Edit</button>
                            </td>}
                          </tr>))
                        }
                      </React.Fragment>)
                  }
                });
              })()}
            </tbody>
          </table>
        </div>
      </div>
      <Modal show={show} onHide={() => closeModal()}>
        <Modal.Header closeButton>
          <Modal.Title>Special Edit Customer</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <>
            <div className="app-main-content-fields-section">
              {isInbound &&<div className="me-4">
								<div className="field-label">Estimated Pickup
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} value={customerEstimatedPickUpTime} onChange={setCustomerEstimatedPickUpTime} />
							</div>}
							<div className="me-4">
								<div className="field-label">Change Address Just For This Trip
								</div>
								<input type="text" value={customerAddressOverride} onChange={(e) => setCustomerAddressOverride((e.currentTarget.value))} />
							</div>
						</div>
            <div className="app-main-content-fields-section">
							<div className="me-4">
								<div className="field-label">Special Checkin
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} onFocus={() => {if (!customerCheckInTime || customerCheckInTime.length === 0) { setCustomerCheckInTime(new Date())}}} value={customerCheckInTime} onChange={setCustomerCheckInTime} />
							</div>
              <div className="me-4">
								<div className="field-label">Special Checkout
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} onFocus={() => {if (!customerCheckOutTime || customerCheckOutTime.length === 0) { setCustomerCheckOutTime(new Date())}}} value={customerCheckOutTime} onChange={setCustomerCheckOutTime} />
							</div>
              <div className="me-4">
								<div className="field-label">Special Pickup
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} onFocus={() => {if (!customerPickUpTime || customerPickUpTime.length === 0) { setCustomerPickUpTime(new Date())}}} value={customerPickUpTime} onChange={setCustomerPickUpTime} />
							</div>
              <div className="me-4">
								<div className="field-label">Special Dropoff
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} onFocus={() => {if (!customerDropOffTime || customerDropOffTime.length === 0) { setCustomerDropOffTime(new Date())}}} value={customerDropOffTime} onChange={setCustomerDropOffTime} />
							</div>
						</div>

            <div className="app-main-content-fields-section">
							<div className="me-4">
								<div className="field-label">Special Set Customer Route Status
								</div>
								<select value={customerStatusInRoute} onChange={(e)=>{setCustomerStatusInRoute(e.currentTarget.value)}}>
                  <option value=""></option>
                  {
                    Object.entries(PERSONAL_ROUTE_STATUS).map((item) => <option key={item[0]} value={item[1]}>
                      {PERSONAL_ROUTE_STATUS_TEXT[item[1]].text}
                    </option>)
                  }
                </select>
							</div>
              <div className="me-4">
								<div className="field-label"> Special Set Customer Pickup Status
								</div>
								<select value={customerPickupStatusInRoute} onChange={(e)=>{setCustomerPickupStatusInRoute(e.currentTarget.value)}}>
                  <option value=""></option>
                  {
                    Object.entries(PICKUP_STATUS).map((item) => <option key={item[0]} value={item[1]}>
                      {PICKUP_STATUS_TEXT[item[1]]}
                    </option>)
                  }
                </select>
							</div>
              
						</div>
            <div className="app-main-content-fields-section">
              <div className="me-4">
								<div className="field-label">Transfer To Route
								</div>
                <input type="text" value={customerTransferToRoute} onChange={(e) => {setCustomerTransferToRoute(e.target.value)}}/>
							</div>
            </div>

            {false && (
              <div className="app-main-content-fields-section">
                <div className="me-4">
                  <div className="field-label">Note
                  </div>
                  <textarea value={customerNote} onChange={(e) => {setCustomerNote(e.target.value)}}></textarea>
                </div>
              </div>
            )}
          </>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="link" size="sm" onClick={() => closeModal()}>
            Close
          </Button>
          <Button variant="primary" size="sm" onClick={() => saveRouteCustomerInfo()}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
      <Modal show={showGroupEditor} onHide={() => closeGroupEditorModal()}>
        <Modal.Header closeButton>
          <Modal.Title>Special Edit Group Participants</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <>
            <div className="app-main-content-fields-section">
              {isInbound &&<div className="me-4">
								<div className="field-label">Estimated Pickup
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} value={customerEstimatedPickUpTime} onChange={setCustomerEstimatedPickUpTime} />
							</div>}
							<div className="me-4">
								<div className="field-label">Special Set Users Route Status
								</div>
								<select value={customerStatusInRoute} onChange={(e)=>{setCustomerStatusInRoute(e.currentTarget.value)}}>
                  <option value=""></option>
                  {
                    Object.entries(PERSONAL_ROUTE_STATUS).map((item) => <option key={item[0]} value={item[1]}>
                      {PERSONAL_ROUTE_STATUS_TEXT[item[1]].text}
                    </option>)
                  }

                </select>
							</div>
						</div>
            <div className="app-main-content-fields-section">
							<div className="me-4">
								<div className="field-label">Special Checkin
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} onFocus={() => {if (!customerCheckInTime || customerCheckInTime.length === 0) { setCustomerCheckInTime(new Date())}}} value={customerCheckInTime} onChange={setCustomerCheckInTime} />
							</div>
              <div className="me-4">
								<div className="field-label">Special Checkout
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} onFocus={() => {if (!customerCheckOutTime || customerCheckOutTime.length === 0) { setCustomerCheckOutTime(new Date())}}} value={customerCheckOutTime} onChange={setCustomerCheckOutTime} />
							</div>
              <div className="me-4">
								<div className="field-label">Special Pickup
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} onFocus={() => {if (!customerPickUpTime || customerPickUpTime.length === 0) { setCustomerPickUpTime(new Date())}}} value={customerPickUpTime} onChange={setCustomerPickUpTime} />
							</div>
              <div className="me-4">
								<div className="field-label">Special Dropoff
								</div>
								<TimePicker disableClock={true} format={'HH:mm'} onFocus={() => {if (!customerDropOffTime || customerDropOffTime.length === 0) { setCustomerDropOffTime(new Date())}}} value={customerDropOffTime} onChange={setCustomerDropOffTime} />
							</div>
						</div>
          </>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="link" size="sm" onClick={() => closeGroupEditorModal()}>
            Close
          </Button>
          <Button variant="primary" size="sm" onClick={() => saveRouteGroupCustomerInfo()}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
      <Modal show={showBulkUpdateModal} onHide={() => closeBulkUpdateModal()}>
        <Modal.Header closeButton>
          <Modal.Title>Bulk Update Route Customer Time</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <>
            <div className="app-main-content-fields-section">
              <div className="me-4">
                <div className="field-label">Customer Enter Center Time</div>
                <TimePicker disableClock={true} format={'HH:mm'} value={bulkEnterCenterTime} onChange={setBulkEnterCenterTime} />
              </div>
              <div className="me-4">
                <div className="field-label">Customer Leave Center Time</div>
                <TimePicker disableClock={true} format={'HH:mm'} value={bulkLeaveCenterTime} onChange={setBulkLeaveCenterTime} />
              </div>
            </div>
            <div className="app-main-content-fields-section">
              <div className="me-4">
                <div className="field-label">Customer Route Status</div>
                <select value={bulkCustomerRouteStatus} onChange={(e) => setBulkCustomerRouteStatus(e.currentTarget.value)}>
                  <option value=""></option>
                  {
                    Object.entries(PERSONAL_ROUTE_STATUS).map((item) => <option key={item[0]} value={item[1]}>
                      {PERSONAL_ROUTE_STATUS_TEXT[item[1]].text}
                    </option>)
                  }
                </select>
              </div>
              <div className="me-4">
                <div className="field-label">Customer Pickup Status</div>
                <select value={bulkCustomerPickupStatus} onChange={(e) => setBulkCustomerPickupStatus(e.currentTarget.value)}>
                  <option value=""></option>
                  {
                    Object.entries(PICKUP_STATUS).map((item) => <option key={item[0]} value={item[1]}>
                      {PICKUP_STATUS_TEXT[item[1]]}
                    </option>)
                  }
                </select>
              </div>
            </div>
            <div className="alert alert-info">
              <strong>Note:</strong> This will update all customers in this route who are not Unscheduled Absent or Scheduled Absent.
            </div>
          </>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="link" size="sm" onClick={() => closeBulkUpdateModal()}>
            Cancel
          </Button>
          <Button variant="primary" size="sm" onClick={() => saveBulkUpdate()}>
            Save
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default PersonnelInfoTable;