// alert(COGNITO.staff_url);

export const FormStructureData = {
    getSubmittedVendees: function (){
        const all_vendees = Data.get('all_vendees_keyed', true);
        if(!all_vendees) return {};

        let selectOptions = {};
        for (let [key, value] of Object.entries(all_vendees)) {
            selectOptions[key] = value.vendee_name + ' (' + value.short_vendee + ')';
        };
        return selectOptions;  
        }
    }

export const FormStructure = {
  
  VendeeForm: [
      {
          id: 'PK',
          type: 'hidden',
          value: ''
      }, 
      {
          id: 'SK',
          type: 'hidden',
          value: ''
      },
      {
          id: 'SubmittedVendees',
          type: 'select',
          value: '',
          xattr: 'required="required"',
          label: 'Submitted Vendees',
          options: FormStructureData.getSubmittedVendees(),
          nullable: true
      },
      {
          id: 'MinLog',
          type: 'text',
          value: '',
          xattr: 'readonly="readonly" required="required"',
          label: 'MinLog'
      },
      {
          id: 'ShortVendee',
          type: 'text',
          value: '',
          xattr: 'readonly="readonly" required="required"',
          label: 'Short Vendee'
      },
      {
          id: 'VendeeName',
          type: 'text',
          value: '',
          xattr: 'readonly="readonly" required="required"',
          label: 'Vendee Name'
      },
      {
          id: 'Email',
          type: 'email',
          value: '',
          xattr: '',
          label: 'Email'
      },
      {
          id: 'BizOwner',
          type: 'select',
          value: '',
          xattr: 'required="required"',
          label: 'Biz Owner',
          options: {
              SDW: "Swift Dataworks",
              SMP: "Medispark"
          }

      },
      {
          id: 'City',
          type: 'text',
          value: '',
          xattr: '',
          label: 'City'
      },
      {
          id: 'State',
          type: 'select',
          value: '',
          xattr: 'required="required"',
          label: 'State',
          options: nigeriaStates
      },
      {
          id: 'DueDate',
          type: 'date',
          value: '',
          xattr: '',
          label: 'Due Date'
      }
  ],

  INVOICE: [
      {
          id: 'PK',
          type: 'hidden',
          value: ''
      }, 
      {
          id: 'SK',
          type: 'hidden',
          value: ''
      }, 
      {
          id: 'EntityType',
          type: 'hidden',
          value: 'INVOICE'
      },
      {
        id: 'InvoiceNumber',
        type: 'text',
        value: '',
        xattr: 'required="required"',
        label: 'Invoice Number'

    },
      {
          id: 'InvoiceServiceType',
          type: 'select',
          value: '',
          xattr: 'required="required"',
          label: 'Service Type',
          options: {
              "Baseline Fee": "Baseline Fee",
              "Annual Maintenance Fee": "Annual Maintenance Fee",
              "Upgrade Fee Tier 1": "Upgrade Fee Tier 1",
              "Upgrade Fee Tier 2": "Upgrade Fee Tier 2",
              "Upgrade Fee Tier 3": "Upgrade Fee Tier 3",
              "Email Services": "Email Services",
              "SMS Services": "SMS Services"

          }
      },
      {
          id: 'InvoiceAmount',
          type: 'number',
          value: '',
          xattr: 'required="required"',
          label: 'Invoice Amount'

      }, {
          id: 'InvoiceDescription',
          type: 'textarea',
          value: '',
          xattr: '',
          label: 'Invoice Description'

      },
      {
          id: 'InvoiceDespatchDate',
          type: 'date',
          value: '',
          xattr: '',
          label: 'Despatch Date'
      
      },
      {
          id: 'InvoiceDueDate',
          type: 'date',
          value: '',
          xattr: '',
          label: 'Due Date'
      }
  ],

  PAYMENT: [
      {
          id: 'PK',
          type: 'hidden',
          value: ''
      }, 
      {
          id: 'SK',
          type: 'hidden',
          value: ''
      }, 
      {
          id: 'InvoiceID',
          type: 'text',
          value: '',
          xattr: 'readonly="readonly" required="required"',
          label: 'Invoice ID'
      }, 
      {
          id: 'EntityType',
          type: 'hidden',
          value: 'PAYMENT'
      },
      {
          id: 'PaymentAmount',
          type: 'number',
          value: '',
          xattr: 'required="required"',
          label: 'Payment Amount'

      }, 
      {
          id: 'PaymentDescription',
          type: 'textarea',
          value: '',
          xattr: '',
          label: 'Payment Description'

      },
      {
          id: 'PaymentDate',
          type: 'date',
          value: '',
          xattr: '',
          label: 'Payment Date'
      }
  ],
  LICENCE: [
    {
        id: 'PK',
        type: 'hidden',
        value: ''
    }, 
    {
        id: 'SK',
        type: 'hidden',
        value: ''
    }, 
    {
      id: 'EntityType',
      type: 'hidden',
      value: 'LICENCE'
  },
    {
      id: 'LicenceID',
      type: 'text',
      value: '',
      xattr: '',
      label: 'Licence ID'
  },
    {
      id: 'LicenceStartDate',
      type: 'date',
      value: '',
      xattr: '',
      label: 'Start Date'
  },
    {
      id: 'LicenceEndDate',
      type: 'date',
      value: '',
      xattr: '',
      label: 'End Date'
  },
    {
      id: 'LicenceDescription',
      type: 'textarea',
      value: '',
      xattr: '',
      label: 'Description'
  },

  ]
}



export const FormTemplate = {
    text: `
        <div>
        <label for="text" class="sr-only">Text</label>

    <div class="relative">
        <input
        type="text"
        class="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
        placeholder=""
        />

        <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-4 w-4 text-gray-400"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
        >
            <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
            />
        </svg>
        </span>
    </div>
    </div>
`,
    email: `
        <div>
        <label for="email" class="sr-only">Email</label>

    <div class="relative">
        <input
        type="email"
        class="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
        placeholder="Enter email"
        />

        <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-4 w-4 text-gray-400"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
        >
            <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
            />
        </svg>
        </span>
    </div>
    </div>
`,

submit: `
    <button type="submit" class="inline-block rounded-lg bg-blue-500 px-5 py-3 text-sm font-medium text-white">
    Submit
    </button>
    `,
 bottom: `<div
    class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 border-opacity-100 p-4 dark:border-opacity-50">
    <button
      type="button"
      class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
      data-te-modal-dismiss
      data-te-ripple-init
      data-te-ripple-color="light">
      Close
    </button>
    <button
      type="submit"
      class="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
      data-te-ripple-init
      data-te-ripple-color="light">
      Save changes
    </button>
  </div>`
}

export const Template = {
     modal: `
    <!-- Modal -->
l    <div
      data-te-modal-init
      class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
      id="modalWrap"
      tabindex="-1"
      aria-labelledby="modalWrapLabel"
      aria-hidden="true">
      <div
        data-te-modal-dialog-ref
        class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
        <div
          class="min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)] pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-600">
          <div
            class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 border-opacity-100 p-4 dark:border-opacity-50">
            <h5
              class="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200"
              id="modalWrapLabel">
              New message to
            </h5>
            <button
              type="button"
              class="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
              data-te-modal-dismiss
              aria-label="Close">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="h-6 w-6">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          <div class="relative flex-auto p-4" data-te-modal-body-ref>
            <div id="innerModalWrap"></div>
            
          </div>
        </div>
      </div>
    </div>`,
    
    spinner: `<div
        class="inline-block h-8 w-8 my-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] text-primary motion-reduce:animate-[spin_1.5s_linear_infinite]"
        role="status">
    </div>`,



userLoggedInHeaderMarkup: `<div class="flex items-center ms-3">
<div>
    <button id="loggedInUserName" data-dropdown-trigger data-dropdown-target="dropdown-user" class="text-blue-700 bg-blue-200 hover:bg-blue-400 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">

    <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
    </svg>
</button>
</div>

<div id="dropdown-user" class="w-44 z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600" id="dropdown-user">
    <div class="px-4 py-3" role="none">

        <p id="loggedInUserEmail" class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
            
        </p>
    </div>
    <ul class="py-1" role="none">
        <li>
            <a href="/${COGNITO.user_type}zone" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Dashboard</a>
        </li>
        <li>
            <a href="/${COGNITO.user_type}profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">My Profile</a>
        </li>

        <li>
            <a href="/${COGNITO.user_type}logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Sign out</a>
        </li>
    </ul>
</div>
</div>`,



staffLoggedInMarkup: `
<div id="userLoggedInWrap" >
    <div class="datalinks p-4">
        <div class="small">
            <a href="/vlist" id="" data-resource="vlist" data-cb="vlist">List</a>
            <span>&bull;</span>
            <a href="/combined_vendees" id="" data-resource="combined_vendees" data-cb="processJoinData">JOINS</a>
            <span>&bull;</span>
            <a href="/vendees" id="fetch_clients_lnk" data-resource="vendees" data-cb="processTableData">VENDEES</a>
            <span>&bull;</span>
            <a href="/rawvendees" id="fetch_vendees_lnk" data-resource="rawvendees" data-cb="processTableData">RAW-VENDEES</a>
        </div>
    </div>

    <h2 class="py-4 font-bold border-b-2 border-sky-600">Remote Reports: <span id="current_resource" class="italic upper"></span></h2>
    <div>
        <a href="#" class="text-primary" data-te-toggle="modal" data-te-target="#modalWrap" data-te-callback="populateEditForm" data-te-title="Create New Client" data-te-body="" data-rowdata='' data-te-ripple-init data-te-ripple-color="light">
            New Client
        </a>
    </div>

    <div id="datawrap" style="text-align:center"></div>
</div>`,


clientLoggedInMarkup: `
<div id="userLoggedInWrap" class="sp-auth">
<h2 class="mb-2 mt-0 text-4xl font-medium leading-tight text-primary">Welcome to the Client Zone</h2>
    <div class="datalinks p-4">
        <div></div>
        <div class="small space-x-4 justify-self-end">
            <a href="/clientzone/vlist" id="" data-resource="vlist" data-cb="vlist">List</a>
            <span>&bull;</span>
            <a href="/clientzone/client/:id/appointments" >APPOINTMENTS</a>
            <span>&bull;</span>
            <a href="/clientzone/client/:id/labreports">LAB REPORTS</a>
            <span>&bull;</span>
            <a href="/clientzone/client/:id/imgreports">IMAGING REPORTS</a>
            <span>&bull;</span>
            <a href="/clientzone/client/:id/medreports">MEDICAL REPORTS</a>
        </div>
    </div>`
,
userLoginHeaderMarkup: `<div id="" class="hidden px-4">
<a href="/${COGNITO.user_type}login" id="" class="text-primary-600">${COGNITO.user_type} Sign In</a>
</div>`,

homeMarkup: `<div id="" class="px-4 text-center text-lg">
    <div>Welcome to our Page!</div>
    <a href="/" id="" class="text-primary-600">See your various options...</a>
    <a href="/stafflogin" id="" class="text-primary-600">Log In as Staff...</a>
    <a href="/clientlogin" id="" class="text-primary-600">Log In as Client...</a>
</div>`,

notFoundMarkup: `<div id="" class="px-4 text-center">
    <div>Oops! We didn't find that page!!!</div>
    <a href="/" id="" class="text-primary-600">Go To Home Page</a>
</div>`,

nigeriaStates: 
    `<select name="states">
    <option value="Abia">Abia</option>
    <option value="Adamawa">Adamawa</option>
    <option value="Akwa Ibom">Akwa Ibom</option>
    <option value="Anambra">Anambra</option>
    <option value="Bauchi">Bauchi</option>
    <option value="Bayelsa">Bayelsa</option>
    <option value="Benue">Benue</option>
    <option value="Borno">Borno</option>
    <option value="Cross River">Cross River</option>
    <option value="Delta">Delta</option>
    <option value="Ebonyi">Ebonyi</option>
    <option value="Edo">Edo</option>
    <option value="Ekiti">Ekiti</option>
    <option value="Enugu">Enugu</option>
    <option value="Gombe">Gombe</option>
    <option value="Imo">Imo</option>
    <option value="Jigawa">Jigawa</option>
    <option value="Kaduna">Kaduna</option>
    <option value="Kano">Kano</option>
    <option value="Katsina">Katsina</option>
    <option value="Kebbi">Kebbi</option>
    <option value="Kogi">Kogi</option>
    <option value="Kwara">Kwara</option>
    <option value="Lagos">Lagos</option>
    <option value="Nasarawa">Nasarawa</option>
    <option value="Niger">Niger</option>
    <option value="Ogun">Ogun</option>
    <option value="Ondo">Ondo</option>
    <option value="Osun">Osun</option>
    <option value="Oyo">Oyo</option>
    <option value="Plateau">Plateau</option>
    <option value="Rivers">Rivers</option>
    <option value="Sokoto">Sokoto</option>
    <option value="Taraba">Taraba</option>
    <option value="Yobe">Yobe</option>
    <option value="Zamfara">Zamfara</option>
    <option value="FCT">Federal Capital Territory</option>
  </select>`
}

