import { Tabs } from '@kobalte/core/tabs'
import { useNavigate } from '@solidjs/router'
import dayjs from 'dayjs'
import { FaSolidThumbsUp, FaSolidUserGear } from 'solid-icons/fa'
import { FiLogOut } from 'solid-icons/fi'
import { VsRefresh } from 'solid-icons/vs'
import { createEffect, createSignal, onMount } from 'solid-js'
import { Show } from 'solid-js/web'
import { Box, Button, Clickable, Column, Combobox, Input, Link, Logo, Modal, ModalButton, Padding, Page, Row } from '../../components/index.ts'
import {
  _additional,
  _additionalAmountList,
  _additionalCodeList,
  _additionalFeeList,
  _additionalUnitList,
  _amountList,
  _applicationNo,
  _approvedDate,
  _assessedDate,
  _assessor,
  _assessorid,
  _codeList,
  _date,
  _feeList,
  _floorArea,
  _location,
  _name,
  _optn,
  _signatureApprover,
  _signatureAssessor,
  _totalUnits,
  _type,
  _units,
} from '../../stores/pdfinfo.ts'
import { checkConnection, createPdfElectrical, createPdfOccupancy, getApi, getApiMulti, getDateTime, postApi, saveNewName, saveNewPassword, securePassword, statusPopsApi, voidPopsApi } from '../../utils/functions/index.ts'
import { AiOutlineLoading3Quarters } from 'solid-icons/ai'
import './Assessor.sass'

const PESO = import.meta.env.VITE_PESO

export default () => {
  const navigate = useNavigate()

  const [totalOp, setTotalOp] = createSignal(0)
  const [assessor, setAssessor] = createSignal('')
  const [dateOp, setDateOp] = createSignal('')
  const [location, setLocation] = createSignal('')
  const [type, setType] = createSignal('')
  const [applicationId, setApplicationId] = createSignal(0)

  const [applicationListElectrical, setApplicationListElectrical] = createSignal<string[]>([])
  const [nameListElectrical, setNameListElectrical] = createSignal<string[]>([])
  const [applicationListOccupancy, setApplicationListOccupancy] = createSignal<string[]>([])
  const [nameListOccupancy, setNameListOccupancy] = createSignal<string[]>([])
  const [applicationListBuilding, setApplicationListBuilding] = createSignal<string[]>([])
  const [nameListBuilding, setNameListBuilding] = createSignal<string[]>([])

  const [errorMessage, setErrorMessage] = createSignal('')
  const [connected, setConnected] = createSignal(true)
  const [printed, setPrinted] = createSignal(false)
  const [printedApplication, setPrintedApplication] = createSignal('')

  const [openConfig, setOpenConfig] = createSignal(false)
  const [configEncPassword, setConfigEncPassword] = createSignal('')
  const [configNewName, setConfigNewName] = createSignal('')
  const [configPassword, setConfigPassword] = createSignal('')
  const [configNewPassword, setConfigNewPassword] = createSignal('')
  const [configNewEncPassword, setConfigNewEncPassword] = createSignal('')
  const [configError, setConfigError] = createSignal('')

  const [configNotification, setConfigNotification] = createSignal(false)

  const [isBuilding, setIsBuilding] = createSignal(false)
  const [isOccupancy, setIsOccupancy] = createSignal(false)
  const [isElectrical, setIsElectrical] = createSignal(false)

  const [employeeId, setEmployeeId] = createSignal(0)
  const [employeeName, setEmployeeName] = createSignal('')

  const [filter, setFilter] = createSignal('')

  const listType = ['Print', 'Reprint (No Change)', 'Void and Reapprove']
  const [selectedType, setSelectedType] = createSignal('Print')

  const [voidError, setVoidError] = createSignal(false)
  const [isLoading, setIsLoading] = createSignal(false)

  let bldgadditional = false

  const checkAccess = async (access: string) => {
    const response = await getApi('check-access', access, employeeId())
    const result = response
    if (result > 0) return true
    else return false
  }

  const getPrintDetails = async (division: string, id: number) => {
    let response
    if (selectedType() === 'Print') response = await getApiMulti(`get-printdetails-${division}`, id)
    else response = await getApiMulti(`get-reprintdetails-${division}`, id)

    const applicationno = response.result
    const date = response.result2
    const location = response.result3
    const name = response.result8
    const type = `${response.result4} - ${response.result5}`
    const assessor = response.result7
    const units = response.result6
    let totalUnits = 0
    let floorArea = 0

    if (division === 'occupancy') {
      totalUnits = response.result9
      floorArea = response.result10

      _totalUnits.set(totalUnits)
      _floorArea.set(floorArea)
    }

    _optn.set(`M${applicationno.split('-')[0]}${applicationno.split('-')[1]}`)
    _applicationNo.set(applicationno)
    _date.set(dayjs(date).format('MMMM DD, YYYY'))
    _name.set(name)
    _location.set(location)
    _type.set(type)
    _assessor.set(assessor)
    _assessorid.set(employeeId())
    _units.set(units)
  }

  const getPrintDetailsFees = async (division: string, id: number) => {
    let response
    if (selectedType() === 'Print') response = await getApiMulti(`get-printdetailsfees-${division}`, id)
    else response = await getApiMulti(`get-reprintdetailsfees-${division}`, id)

    const feeList = response.result
    const accountCodeList = response.result2
    const amountList = response.result3

    _feeList.set(feeList)
    _codeList.set(accountCodeList)
    _amountList.set(amountList)

    _additional.set(false)

    if (division === 'occupancy' && bldgadditional) {
      const response = await getApiMulti('get-printdetailsfees-bldgadditional', id)
      const feeList = response.result
      const accountCodeList = response.result2
      const amountList = response.result3
      const unitList = response.result4

      _additional.set(true)
      _additionalFeeList.set(feeList)
      _additionalCodeList.set(accountCodeList)
      _additionalAmountList.set(amountList)
      _additionalUnitList.set(unitList)
    }
  }

  // const calculateAmounts = () => {
  //   const amounts: string[] = amountList()
  //   let gflguList: number[] = []
  //   let gfdpwhList: number[] = []
  //   let tfboList: number[] = []

  //   for (let i = 0; i < amounts.length; i++) {
  //     const gflgu = parseFloat(amounts[i]) * 0.8
  //     const gfdpwh = parseFloat(amounts[i]) * 0.05
  //     const tfbo = parseFloat(amounts[i]) * 0.15

  //     const roundedGflgu = parseFloat(gflgu.toFixed(2))
  //     const roundedGfdpwh = parseFloat(gfdpwh.toFixed(2))
  //     const roundedTfbo = parseFloat(tfbo.toFixed(2))

  //     gflguList.push(roundedGflgu)
  //     gfdpwhList.push(roundedGfdpwh)
  //     tfboList.push(roundedTfbo)
  //   }

  //   setGflgu(gflguList)
  //   setGfdpwh(gfdpwhList)
  //   setTfbo(tfboList)
  // }

  const closeNotification = async () => {
    setPrinted(false)
    await checkDivision()
    if (isBuilding()) await getListForPrinting('building')
    if (isOccupancy()) await getListForPrinting('occupancy')
    if (isElectrical()) await getListForPrinting('electrical')
  }

  const checkDivision = async () => {
    const building = await checkAccess('BUILDING ORDER OF PAYMENT')
    setIsBuilding(building)

    const occupancy = await checkAccess('OCCUPANCY ORDER OF PAYMENT')
    setIsOccupancy(occupancy)

    const electrical = await checkAccess('ELECTRICAL ASSESSMENT')
    setIsElectrical(electrical)
  }

  const getopdetails = async (division: string, applicationNo: string) => {
    // let op = []
    // if (division === 'building') op = await getApiMulti('get-opdetails-building', applicationNo)
    // if (division === 'occupancy') op = await getApiMulti('get-opdetails-occupancy', applicationNo)
    // if (division === 'electrical') op = await getApiMulti('get-opdetails-electrical', applicationNo)

    let additionalResult
    if (selectedType() === 'Print') {
      additionalResult = await getApi('check-bldgadditional-printing', applicationNo)
    } else additionalResult = await getApi('check-bldgadditional-reprinting', applicationNo)

    bldgadditional = additionalResult > 0

    const op = await getApiMulti(`get-opdetails-${division}`, applicationNo)

    setLocation(op.result[0])
    setType(op.result2[0])
    setAssessor(op.result3[0])
    setTotalOp(calculateTotal(op.result4))
    setDateOp(dayjs(op.result5[0]).format('MMMM DD, YYYY'))
    setApplicationId(op.result6[0])

    // setAssessorId(op.result12[0])
    // setDescriptionList(op.result8)
    // setAmountList(op.result9)
    // setDateOpList(op.result10)
    // calculateAmounts()

    getPrintDetails(division, op.result6[0])
    getPrintDetailsFees(division, op.result6[0])

    getSignatureImage(employeeId())

    const approversignId = await geteSignId(276)
    getApprovedDate(approversignId, applicationNo)
    // const assessorId = await getEmployeeId(op.result7[0])
    // const assessorsignId = await geteSignId(assessorId)
    getAssessedDate(division, op.result6[0])
  }

  const calculateTotal = (list: number[]) => {
    const total = list.map((item) => parseFloat(item.toString())).reduce((acc, curr) => acc + curr, 0)
    return total
  }

  const getListForPrinting = async (division: string) => {
    setIsLoading(true)

    try {
      let response: any

      if (selectedType() === 'Print') response = await getApiMulti(`get-listopprinting-${division}`)
      else response = await getApiMulti(`get-listopreprinting-${division}`)

      if (filter() !== '' && filter().trim().length !== 0) {
        const filteredApplications = response.result.filter((item: string) => item.includes(filter()))
        const filteredIndices = response.result.map((item: string, index: number) => (item.includes(filter()) ? index : -1)).filter((index: number) => index !== -1)
        const filteredNames = filteredIndices.map((index: number) => response.result2[index])

        if (division === 'electrical') {
          setApplicationListElectrical(filteredApplications)
          setNameListElectrical(filteredNames)
        } else if (division === 'occupancy') {
          setApplicationListOccupancy(filteredApplications)
          setNameListOccupancy(filteredNames)
        } else {
          setApplicationListBuilding(filteredApplications)
          setNameListBuilding(filteredNames)
        }
        return
      }

      if (division === 'electrical') {
        setApplicationListElectrical(response.result)
        setNameListElectrical(response.result2)
      } else if (division === 'occupancy') {
        setApplicationListOccupancy(response.result)
        setNameListOccupancy(response.result2)
      } else {
        setApplicationListBuilding(response.result)
        setNameListBuilding(response.result2)
      }
    } catch (error) {
      console.error(error)
    }

    setIsLoading(false)
  }

  const removeEmployee = () => {
    sessionStorage.removeItem('id')
    sessionStorage.removeItem('name')
  }

  const checkLogged = async () => {
    const idStore = sessionStorage.getItem('id')
    const nameStore = sessionStorage.getItem('name')
    setEmployeeId(parseInt(idStore!, 10))
    setEmployeeName(nameStore!)

    if (employeeId() === 0 || employeeId().toString() === 'NaN') {
      removeEmployee()
      navigate('/', { replace: true })
      return false
    }
    return true
  }

  const printHandler = async (division: string, application: string) => {
    let updateOrderofpayment: boolean = false

    setConnected(await checkConnection())
    if (connected() === false) {
      setErrorMessage('No Connection on Server')
      return
    }

    if (division === 'electrical') {
      await setNewStatus(division, 'ELECTRICAL ORDER OF PAYMENT PRINTED', '171', 'ELECOPPRINTED', 1)
      await setNewStatus(division, 'ELECTRICAL ORDERPAYMENT RELEASED', '97', 'ELECRELEASED', 1)
      await setNewStatus(division, 'FOR ELECTRICAL OFFICIAL RECEIPT VALIDATION', '98', 'ELECORVALIDATE', 0)
      await updateDocflow(division, application, 'FOR ELECTRICAL ORDER OF PAYMENT PRINTING')
    } else if (division === 'occupancy') {
      await setNewStatus(division, 'OCCUPANCY ORDER OF PAYMENT PRINTED', '173', 'OCCOPPRINTED', 1)
      await setNewStatus(division, 'OCCUPANCY ORDER OF PAYMENT RELEASED', '174', 'OCCOPRELEASED', 1)
      await setNewStatus(division, 'ORDER OF PAYMENT RELEASE FOR BUREAU OF FIRE', '24', 'OCOOPRELEASE', 0)
      await updateDocflow(division, application, 'APPROVED FOR PRINTING OF BUREAU OF FIRE AND ORDER OF PAYMENT')
    }

    updateOrderofpayment = await updateOp(division)

    if (updateOrderofpayment) {
      postTransaction(application)
      setPrintedApplication(application)
      setPrinted(true)

      if (division === 'electrical') {
        createPdfElectrical()
      } else if (division === 'occupancy') {
        createPdfOccupancy()
      } else console.log('building')
    }
  }

  const rePrintHandler = async (division: string, application: string) => {
    setConnected(await checkConnection())
    if (connected() === false) {
      setErrorMessage('No Connection on Server')
      return
    }

    if (selectedType().includes('Void')) {
      // Return to ASSESSMENT
      // TODO:
      // Set current status (for validation) to 1, is_approve = 1
      // Clear order of payment as long as not Paid
      // Clear esign_transactions

      const status = await statusPopsOp(application)
      const message = status.message

      if (message.includes('No record')) {
        setVoidError(true)
        setErrorMessage('No record found on Pops')
        return
      } else {
        const pops_paid = message.pops_paid
        const epay_paid = message.epay_paid

        if (pops_paid || epay_paid) {
          setVoidError(true)
          setErrorMessage('Already Paid')
          return
        }
      }

      if (division === 'electrical') {
        await setNewStatus(division, 'ELECTRICAL ORDER OF PAYMENT VOIDED', '173', 'ELECOPVOIDED', 1)
        await setNewStatus(division, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL', '94', 'ELECOPAPPROVE', 0)
        await updateDocflow(division, application, 'FOR ELECTRICAL ORDER OF PAYMENT PRINTING')
      } else if (division === 'occupancy') {
        await setNewStatus(division, 'OCCUPANCY ORDER OF PAYMENT VOIDED', '174', 'OCCOPVOIDED', 1)
        //UNFINISH
        await updateDocflow(division, application, 'APPROVED FOR PRINTING OF BUREAU OF FIRE AND ORDER OF PAYMENT')
      }

      await voidPopsOp(application)
      await postTransaction(application)
    } else {
      setPrintedApplication(application)
      setPrinted(true)

      if (division === 'electrical') {
        createPdfElectrical()
      } else if (division === 'occupancy') {
        createPdfOccupancy()
      } else console.log('building')
    }
  }

  const updateOp = async (division: string) => {
    const post = await postApi(`update-opprinted-${division}`, {
      data: parseInt(applicationId().toString(), 10),
    })
    return post
  }

  const setNewStatus = async (division: string, status: string, tag: string, tagword: string, approved: number) => {
    const today = await getDateTime()
    const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
    const statusid = parseInt(applicationId().toString(), 10)

    const post = await postApi(`post-newstatus-${division}`, {
      data: statusid,
      data2: formattedDate,
      data3: status,
      data4: tag,
      data5: tagword,
      data6: parseInt(approved.toString(), 10),
      data7: parseInt(employeeId().toString(), 10),
    })
    return post
  }

  const updateDocflow = async (division: string, application: string, status: string) => {
    await postApi(`update-docflow-${division}`, {
      data: status,
      data2: application,
    })
  }

  const getSignatureImage = async (id: number) => {
    try {
      const response = await getApi('get-signatureimage', id)
      const image = response
      _signatureAssessor.set(image)

      const response2 = await getApi('get-signatureimage', 276)
      const image2 = response2
      _signatureApprover.set(image2)
      return true
    } catch {
      return false
    }
  }

  const geteSignId = async (id: number) => {
    try {
      const response = await getApi('get-esignid', id)
      const result = response
      return result
    } catch {
      return 0
    }
  }

  const postTransaction = async (application: string) => {
    const id = await geteSignId(employeeId())
    const today = await getDateTime()
    const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')

    await postApi('post-esigntransaction', {
      data: parseInt(id, 10),
      data2: application,
      data3: formattedDate,
    })
  }

  const getApprovedDate = async (id: number, application: string) => {
    const response = await getApi('get-signeddate', id, application)
    _approvedDate.set(response)
  }

  const getAssessedDate = async (division: string, id: number) => {
    const response = await getApi(`get-signeddateassessed-${division}`, id)
    _assessedDate.set(response)
  }

  // const getEmployeeId = async (name: string) => {
  //   try {
  //     const response = await ofetch(API + 'get-employeeid/' + name, { parseResponse: JSON.parse })
  //     const result = response.result
  //     return parseInt(result)
  //   } catch (error) {
  //     return 0
  //   }
  // }

  const refresh = async () => {
    if (isBuilding()) await getListForPrinting('building')
    if (isOccupancy()) await getListForPrinting('occupancy')
    if (isElectrical()) await getListForPrinting('electrical')
  }

  const logout = () => {
    removeEmployee()
    navigate('/')
  }

  // const gotoProfile = () => {
  //   sessionStorage.setItem('name', employeeName())
  //   navigate('/profile')
  // }

  const voidPopsOp = async (application: string) => {
    const response = await voidPopsApi(application)
    if (response.includes('Error')) return false
    return true
  }

  const checkStatusPopsLocal = async (application: string) => {
    const response = await getApi('check-statuspops-local', application)
    return response
  }

  const statusPopsOp = async (application: string) => {
    const response = await statusPopsApi(application)
    return response
  }

  const saveConfig = async () => {
    if (configNewName() !== '') await saveNewName(parseInt(employeeId().toString()), configNewName())
    if (configNewPassword() !== '') await saveNewPassword(parseInt(employeeId().toString()), configNewEncPassword())

    setConfigNotification(true)
  }

  const checkCurrentPassword = async () => {
    const encCurrentPasswordV1 = await securePassword(configPassword(), 'v1')
    const encCurrentPasswordV2 = await securePassword(configPassword(), 'v2')

    if (encCurrentPasswordV1 === configEncPassword() || encCurrentPasswordV2 === configEncPassword()) {
      if (configNewPassword() === '') {
        setConfigError('New Password not provided')
        setConfigNewEncPassword('')
      } else {
        setConfigError('')
        encryptNewPassword()
      }
    } else {
      setConfigError('Invalid Password')
      setConfigNewEncPassword('')
    }
  }

  const encryptNewPassword = async () => {
    const encNewPassword = await securePassword(configNewPassword(), 'v2')
    setConfigNewEncPassword(encNewPassword)
  }

  const getPassword = async () => {
    const response = await getApi('get-password', employeeId())
    setConfigEncPassword(response)
  }

  const updateDisplayName = async () => {
    const response = await getApiMulti('get-employeename', employeeId())
    console.log(response.result)
    sessionStorage.setItem('name', response.result)
    setEmployeeName(response.result)
  }

  const closeConfig = async () => {
    await updateDisplayName()
    setConfigNotification(false)
    setOpenConfig(false)

    setConfigEncPassword('')
    setConfigNewName('')
    setConfigPassword('')
    setConfigNewPassword('')
    setConfigNewEncPassword('')
    setConfigError('')
  }

  onMount(async () => {
    const logged = await checkLogged()
    await getPassword()

    if (logged) {
      setSelectedType('Print')

      await checkDivision()
      if (isBuilding()) await getListForPrinting('building')
      if (isOccupancy()) await getListForPrinting('occupancy')
      if (isElectrical()) await getListForPrinting('electrical')
    }
  })

  createEffect(async () => {
    if (filter() !== '') {
      if (isBuilding()) await getListForPrinting('building')
      if (isOccupancy()) await getListForPrinting('occupancy')
      if (isElectrical()) await getListForPrinting('electrical')
    } else if (filter() === '') {
      if (isBuilding()) await getListForPrinting('building')
      if (isOccupancy()) await getListForPrinting('occupancy')
      if (isElectrical()) await getListForPrinting('electrical')
    }
  })

  createEffect(() => {
    if (configPassword() !== '') {
      checkCurrentPassword()
    } else checkCurrentPassword()

    if (configNewPassword() !== '') {
      encryptNewPassword()
    } else encryptNewPassword()
  })

  return (
    <>
      <Page alignment="column">
        <Padding left={4.75} right={4.75} top={0} bottom={0}>
          <Row content="split">
            <Link to="/">
              <Row content="left" gap={2}>
                <Logo size={200} />
                <h1>OCBO e-Sign</h1>
              </Row>
            </Link>

            <Row content="left" gap={1.75}>
              <Box curved thickness={0} padding="1.25rem 2.25rem" background="#0f131d56">
                <span class="profile">{employeeName()}</span>
              </Box>
              <Clickable onClick={() => setOpenConfig(true)}>
                <Row gap={0.25}>
                  <FaSolidUserGear size={20} />
                  <span>Config</span>
                </Row>
              </Clickable>
              <Clickable onClick={logout}>
                <Row gap={0.25}>
                  <FiLogOut size={20} />
                  <span>Logout</span>
                </Row>
              </Clickable>
            </Row>
          </Row>

          <Row content="center">
            <Tabs aria-label="Main navigation" class="tabs">
              <Row>
                <Tabs.List class="tabs__list">
                  <Show when={isBuilding()}>
                    <Tabs.Trigger class="tabs__trigger" value="building">
                      Building
                    </Tabs.Trigger>
                  </Show>
                  <Show when={isOccupancy()}>
                    <Tabs.Trigger class="tabs__trigger" value="occupancy">
                      Occupancy
                    </Tabs.Trigger>
                  </Show>
                  <Show when={isElectrical()}>
                    <Tabs.Trigger class="tabs__trigger" value="electrical">
                      Electrical
                    </Tabs.Trigger>
                  </Show>
                  <Tabs.Indicator class="tabs__indicator" />
                </Tabs.List>
              </Row>

              <Tabs.Content class="tabs__content" value="building">
                <Row>
                  <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
                </Row>

                <Padding top={0} bottom={0} right={10} left={10}>
                  <Row content="split">
                    <Input value={filter()} onChange={setFilter} placeholder="Filter Application Number" />
                    <Row>
                      {/* <Combobox options={listType} value={selectedType()} onChange={setSelectedType} placeholder="Select Type" width='200px' /> */}
                      <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={refresh}></Button>
                    </Row>
                  </Row>
                </Padding>

                <Row>
                  <table class="table">
                    <thead>
                      <tr>
                        <th>Application Number</th>
                        <th>Name</th>
                        <th style="text-align: center">Show Details</th>
                      </tr>
                    </thead>
                    <tbody>
                      {applicationListBuilding().map((item: string, index: number) => (
                        <tr>
                          <td>{item}</td>
                          <td>{nameListBuilding()[index]}</td>

                          <td>
                            <ModalButton
                              class="modal"
                              label="Show Details"
                              design="bo-link"
                              background="#121e2acc"
                              color="#ffffffec"
                              function={async () => {
                                await getopdetails('building', item)
                              }}
                            >
                              <Padding top={0} left={2} right={2} bottom={0}>
                                <span class="modal__application-number">{item}</span>

                                <Padding top={1} left={0} right={0} bottom={0}>
                                  <section class="modal__row">
                                    <span class="modal__row__label">Name of Applicant:</span>
                                    <span class="modal__row__detail">{nameListBuilding()[index]}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Location:</span>
                                    <span class="modal__row__detail">{location()}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Type:</span>
                                    <span class="modal__row__detail">{type().toUpperCase()}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Assessed By:</span>
                                    <span class="modal__row__detail">{assessor()}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Date Assessed:</span>
                                    <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Total Fee:</span>
                                    <span class="modal__row__detail__price">
                                      {PESO}{' '}
                                      {totalOp().toLocaleString('en-US', {
                                        minimumFractionDigits: 2,
                                      })}
                                    </span>
                                  </section>
                                </Padding>

                                <Row padding="2rem 0 0 0">
                                  <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('building', item)}></Button>
                                  <span class="modal__cancel">Click anywhere to cancel</span>
                                </Row>
                              </Padding>
                            </ModalButton>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </Row>
              </Tabs.Content>
              <Tabs.Content class="tabs__content" value="occupancy">
                <Row>
                  <h2>List of Ready to Print in Occupancy Order of Payments</h2>
                </Row>

                <Padding top={0} bottom={0} right={10} left={10}>
                  <Row content="split">
                    <Input value={filter()} onChange={setFilter} placeholder="Filter Application Number" />
                    <Row>
                      {/* <Combobox options={listType} value={selectedType()} onChange={setSelectedType} placeholder="Select Type" width='200px' /> */}
                      <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={refresh}></Button>
                    </Row>
                  </Row>
                </Padding>

                <Row>
                  <table class="table">
                    <thead>
                      <tr>
                        <th>Application Number</th>
                        <th>Name</th>
                        <th style="text-align: center">Show Details</th>
                      </tr>
                    </thead>
                    <tbody>
                      {applicationListOccupancy().map((item: string, index: number) => (
                        <tr>
                          <td>{item}</td>
                          <td>{nameListOccupancy()[index]}</td>

                          <td>
                            <ModalButton
                              class="modal"
                              label="Show Details"
                              design="bo-link"
                              background="#121e2acc"
                              color="#ffffffec"
                              function={async () => {
                                await getopdetails('occupancy', item)
                              }}
                            >
                              <Padding top={0} left={2} right={2} bottom={0}>
                                <span class="modal__application-number">{item}</span>

                                <Padding top={1} left={0} right={0} bottom={0}>
                                  <section class="modal__row">
                                    <span class="modal__row__label">Name of Applicant:</span>
                                    <span class="modal__row__detail">{nameListOccupancy()[index]}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Location:</span>
                                    <span class="modal__row__detail">{location()}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Type:</span>
                                    <span class="modal__row__detail">{type().toUpperCase()}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Assessed By:</span>
                                    <span class="modal__row__detail">{assessor()}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Date Assessed:</span>
                                    <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
                                  </section>

                                  <section class="modal__row">
                                    <span class="modal__row__label">Total Fee:</span>
                                    <span class="modal__row__detail__price">
                                      {PESO}{' '}
                                      {totalOp().toLocaleString('en-US', {
                                        minimumFractionDigits: 2,
                                      })}
                                    </span>
                                  </section>
                                </Padding>

                                <Row padding="2rem 0 0 0">
                                  <Show when={selectedType() === 'Print'}>
                                    <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('occupancy', item)}></Button>
                                  </Show>
                                  <Show when={selectedType() !== 'Print'}>
                                    <Button wide label="Reprint" edges="curved" design="bo-primary" onClick={() => rePrintHandler('occupancy', item)}></Button>
                                  </Show>
                                  <span class="modal__cancel">Click anywhere to cancel</span>
                                </Row>
                              </Padding>
                            </ModalButton>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </Row>
              </Tabs.Content>
              <Tabs.Content class="tabs__content" value="electrical">
                <Row>
                  <h2>List of Ready to Print in Electrical Order of Payments</h2>
                </Row>

                <Padding top={0} bottom={0} right={10} left={10}>
                  <Row content="split">
                    <Input value={filter()} onChange={setFilter} placeholder="Filter Application Number" />
                    <Row gap={0.5}>
                      {/* <AiOutlineQuestionCircle size={24}/> */}
                      <Combobox options={listType} value={selectedType()} onChange={setSelectedType} placeholder="Select Type" width="250px" />
                      <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={refresh}></Button>
                    </Row>
                  </Row>
                </Padding>

                <Row>
                  <Show when={isLoading()}>
                    <Padding top={2} bottom={0} right={10} left={10}>
                      <Column gap={1}>
                        <AiOutlineLoading3Quarters class="loading-spinner" size={42} opacity={0.8} />
                        <span>Downloading Data</span>
                      </Column>
                    </Padding>
                  </Show>

                  <Show when={!isLoading()}>
                    <table class="table">
                      <thead>
                        <tr>
                          <th>Application Number</th>
                          <th>Name</th>
                          <th style="text-align: center">Show Details</th>
                        </tr>
                      </thead>
                      <tbody>
                        {applicationListElectrical().map((item: string, index: number) => (
                          <tr>
                            <td>{item}</td>
                            <td>{nameListElectrical()[index]}</td>

                            <td>
                              <ModalButton
                                class="modal"
                                label="Show Details"
                                design="bo-link"
                                background="#121e2acc"
                                color="#ffffffec"
                                function={async () => {
                                  await getopdetails('electrical', item)
                                }}
                              >
                                <Padding top={0} left={2} right={2} bottom={0}>
                                  <span class="modal__application-number">{item}</span>

                                  <Padding top={1} left={0} right={0} bottom={0}>
                                    <section class="modal__row">
                                      <span class="modal__row__label">Name of Applicant:</span>
                                      <span class="modal__row__detail">{nameListElectrical()[index]}</span>
                                    </section>

                                    <section class="modal__row">
                                      <span class="modal__row__label">Location:</span>
                                      <span class="modal__row__detail">{location()}</span>
                                    </section>

                                    <section class="modal__row">
                                      <span class="modal__row__label">Type:</span>
                                      <span class="modal__row__detail">{type().toUpperCase()}</span>
                                    </section>

                                    <section class="modal__row">
                                      <span class="modal__row__label">Assessed By:</span>
                                      <span class="modal__row__detail">{assessor()}</span>
                                    </section>

                                    <section class="modal__row">
                                      <span class="modal__row__label">Date Assessed:</span>
                                      <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
                                    </section>

                                    <section class="modal__row">
                                      <span class="modal__row__label">Total Fee:</span>
                                      <span class="modal__row__detail__price">
                                        {PESO}{' '}
                                        {totalOp().toLocaleString('en-US', {
                                          minimumFractionDigits: 2,
                                        })}
                                      </span>
                                    </section>
                                  </Padding>

                                  <Row padding="2rem 0 0 0">
                                    <Show when={selectedType() === 'Print'}>
                                      <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('electrical', item)}></Button>
                                    </Show>
                                    <Show when={selectedType() !== 'Print'}>
                                      <Button wide label="Reprint" edges="curved" design="bo-primary" onClick={() => rePrintHandler('electrical', item)}></Button>
                                    </Show>
                                    <span class="modal__cancel">Click anywhere to cancel</span>
                                  </Row>
                                </Padding>
                              </ModalButton>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </Show>
                </Row>
              </Tabs.Content>
            </Tabs>
          </Row>
        </Padding>
      </Page>

      <div onClick={closeNotification}>
        <Modal trigger={printed()} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
          <Padding top={1} bottom={1} left={2} right={2}>
            <Column>
              <Row gap={4}>
                <FaSolidThumbsUp size={75} />
                <Box curved thickness={3} color="#cdfbe1f0" padding="1rem">
                  <span class="approval">Printed</span>
                </Box>
              </Row>
              <Row padding="2rem 0 0 0">
                <h2>{printedApplication()}</h2>
              </Row>

              <Row>
                <span class="close-text">Click anywhere to proceed</span>
              </Row>
            </Column>
          </Padding>
        </Modal>
      </div>

      <div onClick={() => setConnected(true)}>
        <Modal trigger={connected() === false} background="#562020ff" color="#ffebebe6" opacity={0.8}>
          <Padding top={1} bottom={1} left={4} right={4}>
            <Column>
              <Row>
                <Box curved thickness={3} color="#ffebebe6" padding="1rem">
                  <h2>Connection Error</h2>
                </Box>
              </Row>

              <Row>
                <h3>{errorMessage()}</h3>
              </Row>

              <Row>
                <span class="close-text">Click anywhere to close</span>
              </Row>
            </Column>
          </Padding>
        </Modal>
      </div>

      <div onClick={() => setVoidError(false)}>
        <Modal trigger={voidError()} background="#562020ff" color="#ffebebe6" opacity={0.8}>
          <Padding top={1} bottom={1} left={4} right={4}>
            <Column>
              <Row>
                <Box curved thickness={3} color="#ffebebe6" padding="1rem">
                  <h2>Invalid Application Void</h2>
                </Box>
              </Row>

              <Row>
                <h3>{errorMessage()}</h3>
              </Row>

              <Row>
                <span class="close-text">Click anywhere to close</span>
              </Row>
            </Column>
          </Padding>
        </Modal>
      </div>

      <Modal trigger={openConfig()} background="#16212c" color="#ffffffed" opacity={0.8} width="30rem">
        <Padding top={1} bottom={1} left={4} right={4}>
          <section class="config">
            <div class="config__row">
              Name:
              <span>{employeeName()}</span>
            </div>

            <div class="config__edit">
              <span class="config__edit__title">Change Displayed Name</span>
              <Input value={configNewName()} onChange={setConfigNewName} placeholder="Enter new name" />
              <span class="config__edit__info">Leave blank to remain unchanged.</span>
            </div>

            <div class="config__edit">
              <span class="config__edit__title">Change Password</span>
              <Input isPassword value={configPassword()} onChange={setConfigPassword} placeholder="Enter current password" />
              <Input isPassword value={configNewPassword()} onChange={setConfigNewPassword} placeholder="Enter new password" />

              <Show when={configNewPassword().length !== 0}>
                <span style="padding: 1.75rem 0 0 0">Current Encrypted Password:</span>
                <span>{configEncPassword()}</span>

                <span style="padding: 0.75rem 0 0 0">New Encrypted Password:</span>
                <span>{configNewEncPassword()}</span>
              </Show>
            </div>

            <Show when={configError() !== ''}>
              <span class="required-config">{configError()}</span>
              <Button label="Cancel" edges="curved" design="bo-danger" onClick={() => setOpenConfig(false)} wide />
            </Show>

            <div class="config__button">
              <Show when={configError() === ''}>
                <Button label="Confirm" edges="curved" design="bo-primary" onClick={saveConfig} wide />
                <Button label="Cancel" edges="curved" design="bo-danger" onClick={() => setOpenConfig(false)} wide />
              </Show>
            </div>
          </section>
        </Padding>
      </Modal>

      <div onClick={closeConfig}>
        <Modal trigger={configNotification() === true} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
          <Padding top={1} bottom={1} left={4} right={4}>
            <Column>
              <Row gap={4}>
                <Box curved thickness={3} color="#cdfbe1f0" padding="1rem">
                  <span class="approval">Account Updated</span>
                </Box>
              </Row>

              <Row>
                <span class="close-text">Click anywhere to close</span>
              </Row>
            </Column>
          </Padding>
        </Modal>
      </div>
    </>
  )
}