<template>

test
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-
heading-01"
class="slds-modal slds-fade-in-open slds-modal_large">
<div class="slds-modal__container">
<div class="slds-clearfix">
<div class="slds-float_right" >
<lightning-button-icon icon-name="utility:close" alternative-
text="Cancel and close" variant="border-inverse"
onclick={hideSCADAModel}></lightning-button-icon>
</div>
</div>
<div class="slds-modal__header">
<h1 id="modal-heading-01" class="slds-modal__title slds-
hyphenate">Create Inbound Call</h1>
</div>
<div class="slds-modal__content slds-p-horizontal_medium" id="modal-
content-id-1">
<lightning-spinner alternative-text="Loading" size="small"
if:true={isLoading}></lightning-spinner>
<article class="slds-card">
<div class="slds-card__body slds-card__body_inner">
<div class="FormHeading slds-text-heading_small" >
<label for="label" class="container">INBOUND
DETAILS<span class="slds-float_right"><abbr class="slds-required">*</abbr> =
Required</span></label>
</div>
<div class="slds-grid slds-wrap">

<div class="slds-col slds-large-size_1-of-2 slds-

size_1-of-1 slds-p-right_xx-large">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-1">
<c-custom-lookup-lwc icon-
name="standard:account" s-object-api-name="account" from-s-c-a-d-a="true"
label="Customer"
onlookupupdate={handleAccountChange} data-field="Name"
placeholder="Search Customer
here..."></c-custom-lookup-lwc>
</div>
<div class="slds-col slds-size_1-of-1">
<lightning-combobox value={callType}
name="callType" label="Call Type" required options={callTypeOptions}
onchange={handleCallTypeChange} disabled={callTypeDisabled}></lightning-combobox>
</div>
<div class="slds-col slds-size_1-of-1">
<lightning-combobox value={issueType}
name="issueType" label="Issue Type" required options={issueTypeOptions}
onchange={handleIssueTypeChange} disabled={issueTypeDisabled}></lightning-combobox>
</div>
<div class="slds-col slds-size_1-of-1">
<template if:true={hasBothName}>
<div class="slds-grid slds-wrap">
<template for:each={namefields}
for:item="field" for:index="index">
<div class="slds-col slds-
size_1-of-2 slds-p-horizontal_xxx-small" key={field.fieldAPIName}
if:true={field.showField}>
 <div
if:true={field.isPhone}>
<lightning-input
type="text" name={field.fieldAPIName} data-name={field.fieldAPIName} data-
index={index} label={field.fieldLabel} onchange={handleNameValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
<div
if:true={field.isPicklist}>
<lightning-combobox
options={field.options} name={field.fieldAPIName} data-name={field.fieldAPIName}
data-index={index} label={field.fieldLabel} onchange={handleNameValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-combobox>
</div>
<div
if:true={field.isMultiPicklist}>
<lightning-dual-listbox
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
data-index={index} source-label="Available" selected-label="Selected"
options={field.options} onchange={handleNameValuesChange}
value={field.multiPicklistValue}></lightning-dual-listbox>
</div>
<div
if:true={field.isText}>
<lightning-input
type="text" name={field.fieldAPIName} data-name={field.fieldAPIName}
label={field.fieldLabel} data-index={index} onchange={handleNameValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
</div>
</template>
</div>
</template>
</div>
<div class="slds-col slds-size_1-of-1"
if:false={hasBothContacts}>
<template for:each={namefields}
for:item="field" for:index="index">
<div key={field.fieldAPIName}
if:true={field.showField} >
<div if:true={field.isPhone}>
<lightning-input type="text"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
data-index={index} onchange={handleNameValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isPicklist}>
<lightning-combobox
options={field.options} name={field.fieldAPIName} data-name={field.fieldAPIName}
data-index={index} label={field.fieldLabel} onchange={handleNameValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-combobox>
</div>
<div
if:true={field.isMultiPicklist}>
<lightning-dual-listbox
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
data-index={index} source-label="Available" selected-label="Selected"
options={field.options} onchange={handleNameValuesChange}
value={field.multiPicklistValue}></lightning-dual-listbox>
</div>
<div if:true={field.isText}>
<lightning-input type="text"
name={field.fieldAPIName} data-name={field.fieldAPIName} data-index={index}
label={field.fieldLabel} onchange={handleNameValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
</div>
</template>
</div>
<div class="slds-col slds-size_1-of-1">
<template if:true={hasBothContacts}>
<div class="slds-grid slds-wrap">
<template for:each={contactfields}
for:item="field">
<div class="slds-col slds-
size_1-of-2 slds-p-horizontal_xxx-small" key={field.fieldAPIName}
if:true={field.showField}>
<div
if:true={field.isPhone}>
<lightning-input
type="text" name={field.fieldAPIName} data-name={field.fieldAPIName}
label={field.fieldLabel} onchange={handleContactValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
<div
if:true={field.isPicklist}>
<lightning-combobox
options={field.options} name={field.fieldAPIName} data-name={field.fieldAPIName}
label={field.fieldLabel} onchange={handleContactValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-combobox>
</div>
<div
if:true={field.isMultiPicklist}>
<lightning-dual-listbox
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
source-label="Available" selected-label="Selected" options={field.options}
onchange={handleContactValuesChange} value={field.multiPicklistValue}></lightning-
dual-listbox>
</div>
<div
if:true={field.isText}>
<lightning-input
type="text" name={field.fieldAPIName} data-name={field.fieldAPIName}
label={field.fieldLabel} onchange={handleContactValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
</div>
</template>
</div>
</template>
</div>
 <div class="slds-col slds-size_1-of-1"
if:false={hasBothContacts}>
<template for:each={contactfields}
for:item="field">
<div key={field.fieldAPIName}
if:true={field.showField}>
<div if:true={field.isPhone}>
<lightning-input type="text"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleContactValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isPicklist}>
<lightning-combobox
options={field.options} name={field.fieldAPIName} data-name={field.fieldAPIName}
label={field.fieldLabel} onchange={handleContactValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-combobox>
</div>
<div
if:true={field.isMultiPicklist}>
<lightning-dual-listbox
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
source-label="Available" selected-label="Selected" options={field.options}
onchange={handleContactValuesChange} value={field.multiPicklistValue}></lightning-
dual-listbox>
</div>
<div if:true={field.isText}>
<lightning-input type="text"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleContactValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
</div>
</template>
</div>
<template for:each={inboundDynamicFields}
for:item="field">
<div class="slds-col slds-size_1-of-1"
key={field.fieldAPIName} if:true={field.showField}>
<div if:true={field.isDate}>
<lightning-input type="date"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInboundValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isDateTime}>
<lightning-input type="datetime"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInboundValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isEmail}>
<lightning-input type="email"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInboundValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isPhone}>
 <lightning-input type="text"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInboundValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isNumber}>
<lightning-input type="number"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInboundValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isCheckbox}>
<lightning-input class="slds-p-
top_medium" type="checkbox" name={field.fieldAPIName} data-
name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInboundValuesChange} checked={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isLookup} >
<lightning-record-picker
data-name={field.fieldAPIName}

placeholder="Search here..."
label={field.fieldLabel}
object-api-
name={field.objectAPIName}

onchange={handleInboundValuesChange}

required={field.isRequiredField}
></lightning-record-picker>
</div>
<div if:true={field.isPicklist}>
<lightning-combobox
options={field.options} name={field.fieldAPIName} data-name={field.fieldAPIName}
label={field.fieldLabel} onchange={handleInboundValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-combobox>
</div>
<div if:true={field.isMultiPicklist}>
<lightning-dual-listbox
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
source-label="Available" selected-label="Selected" options={field.options}
onchange={handleInboundValuesChange} value={field.multiPicklistValue}></lightning-
dual-listbox>
</div>
<div if:true={field.isText}>
<lightning-input type="text"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInboundValuesChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isDescription}>
<lightning-textarea
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
style="line-height: 2.5;" onchange={handleInboundValuesChange}
value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-textarea>
</div>
 </div>
</template>

</div>
</div>

<div class="slds-col slds-large-size_1-of-2 slds-

size_1-of-1 slds-p-left_xx-large slds-p-top_small"
if:true={locationInfo.showField}>
<div >
<lightning-map if:true={showMap} map-
markers={mapMarkers} zoom-level={zoomLevel} markers-title="Show Locations"
style="height: 285px; max-height: 300px"></lightning-map>
</div>
<div class="slds-grid slds-wrap"
if:true={locationInfo.showField}>
<div class="slds-col slds-size_1-of-2">
<div class="slds-form-element slds-p-
top_xx-small" >
<label for="label"><span style="color:
red;" if:true={locationInfo.isRequiredField}>*</span> Location</label>
<div class="slds-form-
element__control">
<iframe src={vfPageUrl}
width="100%" height="150px" frameborder="0"
if:true={locationInfo.showField}></iframe>
</div>
</div>
</div>
<div class="slds-col slds-size_1-of-2"
style="padding-top: 20px;" if:true={locationInfo.showField}>
<lightning-button label="Asset Loc" data-
value="POI" onclick={loadCompanyLocations}
disabled={locationInfo.disableField}></lightning-button>
<lightning-button label="Show Map" data-
value="ShowMap" onclick={loadCompanyLocations} class="slds-p-left_medium"
disabled={locationInfo.disableField}></lightning-button>
</div>
</div>
</div>
</div>
<br />
<div class="FormHeading slds-text-heading_small slds-p-
top_xxx-small" >
<label for="label" class="container">OUTBOUND
DETAILS</label>
</div>
<div class="slds-form">
<lightning-record-edit-form object-api-name="Case">
<div class="slds-grid slds-wrap">
<template for:each={outboundDynamicFields}
for:item="field">
<div key={field.fieldAPIName} class="slds-
col slds-large-size_1-of-2 slds-size_1-of-1 slds-p-horizontal_medium"
if:true={field.showField}>
<div if:true={field.isDate}>
<lightning-input type="date"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInputChange} value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isDateTime}>
<lightning-input type="datetime"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInputChange} value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isEmail}>
<lightning-input type="email"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInputChange} value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isPhone}>
<lightning-input type="text"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInputChange} value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isNumber}>
<lightning-input type="number"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInputChange} value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isCheckbox}>
<lightning-input class="slds-p-
top_medium" type="checkbox" name={field.fieldAPIName} data-
name={field.fieldAPIName} label={field.fieldLabel} onchange={handleInputChange}
checked={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
<div if:true={field.isLookup} >
<lightning-record-picker
data-name={field.fieldAPIName}

placeholder="Search here..."
label={field.fieldLabel}
object-api-
name={field.objectAPIName}
onchange={handleInputChange}

required={field.isRequiredField}
></lightning-record-picker>
</div>
<div if:true={field.isPicklist}>
<lightning-combobox
options={field.options} name={field.fieldAPIName} data-name={field.fieldAPIName}
label={field.fieldLabel} onchange={handleInputChange} value={field.fieldValue}
disabled={field.disableField} required={field.isRequiredField}></lightning-
combobox>
</div>
<div if:true={field.isMultiPicklist}>
<lightning-dual-listbox
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
source-label="Available" selected-label="Selected" options={field.options}
onchange={handleInputChange} value={field.multiPicklistValue}></lightning-dual-
listbox>
 </div>
<div if:true={field.isText}>
<lightning-input type="text"
name={field.fieldAPIName} data-name={field.fieldAPIName} label={field.fieldLabel}
onchange={handleInputChange} value={field.fieldValue} disabled={field.disableField}
required={field.isRequiredField}></lightning-input>
</div>
</div>
</template>

</div>
</lightning-record-edit-form>
</div>
<br/>
<div class="FormHeading slds-text-heading_small" >
<label for="label" class="container">NOTES</label>
</div>
<div class="slds-p-horizontal_small slds-p-bottom_x-small">
<lightning-textarea name="notes" value={notes} data-
value="Notes" onchange={handleNotesChange}></lightning-textarea>
</div>
</div>
</article>
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button_neutral" aria-label="Cancel
and close" onclick={hideSCADAModel}>Cancel</button>
<button class="slds-button slds-button_brand"
onclick={handleSave}>Save</button>
</div>

<template if:true={showRecordDetails}>
<div class="slds-modal slds-fade-in-open slds-backdrop">
<div class="slds-modal__container" style="width: 50%;">
<!------HEADER Section-->
<div class="slds-modal__header">
<lightning-button-icon icon-name="utility:close"
alternative-text="Close this window" size="large"
variant="bare-inverse" onclick={closeModal}
class="slds-modal__close">
</lightning-button-icon>
<h2>Asset Locations</h2>
</div>
<!------Body Section-->
<div class="slds-modal__content slds-p-around_medium">
<template if:true={customerdata}>
<div class="custom-container">
<lightning-input class="custom-search-input"
type="text" label="Search" value={searchCriteria}
onchange={handleSearchChange}></lightning-input>
</div>
<div class="custom-spacing"></div>
<lightning-datatable data={customerdata}
columns={columns} key-field="Id" onrowselection={handleRowSelection}></lightning-
datatable>
</template>
</div>
<!------Footer Section-->
<div class="slds-modal__footer">
 <lightning-button label="Select" variant="brand"
onclick={handleAssetLocationSelection}>
</lightning-button>
</div>
</div>
</div>
</template>

</div>
</section>
<div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
</template>