<template>

<!-- <div if:true={requestedQuote}> -->

<div>
<h1 style="position: relative;bottom: 20px;font-size: xx-
large;">Request a Bulk Quote</h1>
</div>
<p style="position: relative; top: 4px;">Enter a catalog number, if known,
or a description.</p><br>
<br>
<!--item1-->
<lightning-card class="custom-card">
<h1 slot="title" style="color: white;">Item 1</h1>
</lightning-card>
<lightning-card>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<!-- <lightning-input label="Catalog Number"
value={catalogNumber} onchange={handleCatalogNumberChange} style="width:
132px;"></lightning-input> -->
<lightning-input label="Catalog Number" data-index="1"
value={catalogNumber1} onchange={handleonBlurCatalogNumberChange} style="width:
132px; left:35px"></lightning-input>
</div>
<!-- <template if:true={isInvalidCatalogNumber}>
<div class="error-message">Invalid Catalog Number</div>
</template> -->
<div class="slds-col">
<lightning-input label="CAS Number" data-index="1"
style="width: 145px; left:71px" value={casNumber1} data-id={Id1}
onchange={handleCASNumberChange} disabled></lightning-input>
</div>
<div class="slds-col">
<lightning-input style="width: 438px; left:85px;" data-
index="1" label="Product or Custom Synthesis Description"
value={productDescription1} onchange={handleProductDescriptionChange} required
class={productClass}></lightning-input>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<lightning-input label="Total Quantity" value={TotalQuantity21}
data-index="21" style="width: 133px; left:35px" onchange={handleDataChange}
required></lightning-input>
</div>
<div class="slds-col">
<!-- <lightning-input label="Unity of Measure" style="width:
200px;" required></lightning-input> -->
<lightning-combobox
name="unityOfMeasure"
label="Unit of Measure"
placeholder="Select Unity of Measure"
options={unityOfMeasureOptions}
onchange={handleUnityOfMeasureChange1}
value={selectedUnityOfMeasure1}
style="width: 145px; left: 50px;"
required>
</lightning-combobox>
</div>
<div class="slds-col">
 <lightning-input label="Comment-purity/other requirement" data-
index="15" value={CommentPurity15} onchange={handleDataChange}
style="width:375px;left:43px"></lightning-input>
</div>
</div>
<div class="slds-grid slds-gutters">
<lightning-input style="left:45px;" value={SpecialInstructions18}
data-index="18" onchange={handleDataChange} label="Special Instructions(requested
package size, etc.)"></lightning-input>
</div>
</lightning-card>
<br><br>

<!--item2-->
<!-- <lightning-card title="Item 2" class="custom-card"></lightning-card>
-->
<lightning-card class="custom-card">
<h1 slot="title" style="color: white;">Item 2</h1>
</lightning-card>
<lightning-card>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<!-- <lightning-input label="Catalog Number"
value={catalogNumber} onchange={handleCatalogNumberChange} style="width:
132px;"></lightning-input> -->
<lightning-input label="Catalog Number" data-index="2"
value={catalogNumber2} onchange={handleonBlurCatalogNumberChange} style="width:
132px; left:35px"></lightning-input>
</div>
<!-- <template if:true={isInvalidCatalogNumber}>
<div class="error-message">Invalid Catalog Number</div>
</template> -->
<div class="slds-col">
<lightning-input label="CAS Number" data-index="2"
style="width: 145px; left:71px" value={casNumber2} data-id={Id2}
onchange={handleCASNumberChange} disabled></lightning-input>
</div>
<div class="slds-col">
<lightning-input style="width: 438px; left:85px;" data-
index="2" label="Product or Custom Synthesis Description"
value={productDescription2} onchange={handleProductDescriptionChange} required
class={productClass}></lightning-input>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<lightning-input label="Total Quantity" data-index="22"
value={TotalQuantity22} onchange={handleDataChange} style="width: 133px; left:35px"
required></lightning-input>
</div>
<div class="slds-col">
<!-- <lightning-input label="Unity of Measure" style="width:
200px;" required></lightning-input> -->
<lightning-combobox
name="unityOfMeasure"
label="Unit of Measure"
placeholder="Select Unity of Measure"
options={unityOfMeasureOptions}
 onchange={handleUnityOfMeasureChange2}
value={selectedUnityOfMeasure2}
style="width: 145px; left: 50px;"
required>
</lightning-combobox>
</div>
<div class="slds-col">
<lightning-input label="Comment-purity/other requirement" data-
index="16" value={CommentPurity16} onchange={handleDataChange}
style="width:375px;left:43px"></lightning-input>
</div>
</div>
<div class="slds-grid slds-gutters">
<lightning-input style="left:45px;" value={SpecialInstructions19}
data-index="19" onchange={handleDataChange} label="Special Instructions(requested
package size, etc.)"></lightning-input>
</div>
</lightning-card>
<br><br>

<!--item3-->
<!-- <lightning-card title="Item 3" class="custom-card"></lightning-card>
-->
<lightning-card class="custom-card">
<h1 slot="title" style="color: white;">Item 3</h1>
</lightning-card>
<lightning-card>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<!-- <lightning-input label="Catalog Number"
value={catalogNumber} onchange={handleCatalogNumberChange} style="width:
132px;"></lightning-input> -->
<lightning-input label="Catalog Number" data-index="3"
value={catalogNumber3} onchange={handleonBlurCatalogNumberChange} style="width:
132px; left:35px"></lightning-input>
</div>
<!-- <template if:true={isInvalidCatalogNumber}>
<div class="error-message">Invalid Catalog Number</div>
</template> -->
<div class="slds-col">
<lightning-input label="CAS Number" data-index="3"
style="width: 145px; left:71px" value={casNumber3} data-id={Id3}
onchange={handleCASNumberChange} disabled></lightning-input>
</div>
<div class="slds-col">
<lightning-input style="width: 438px; left:85px;" data-
index="3" label="Product or Custom Synthesis Description"
value={productDescription3} onchange={handleProductDescriptionChange} required
class={productClass}></lightning-input>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<lightning-input label="Total Quantity" data-index="23"
value={TotalQuantity23} onchange={handleDataChange} style="width: 133px; left:35px"
required></lightning-input>
</div>
<div class="slds-col">
<!-- <lightning-input label="Unity of Measure" style="width:
200px;" required></lightning-input> -->
<lightning-combobox
name="unityOfMeasure"
label="Unit of Measure"
placeholder="Select Unity of Measure"
options={unityOfMeasureOptions}
onchange={handleUnityOfMeasureChange3}
value={selectedUnityOfMeasure3}
style="width: 145px; left: 50px;"
required>
</lightning-combobox>
</div>
<div class="slds-col">
<lightning-input label="Comment-purity/other requirement" data-
index="17" value={CommentPurity17} onchange={handleDataChange}
style="width:375px;left:43px"></lightning-input>
</div>
</div>
<div class="slds-grid slds-gutters">
<lightning-input style="left:45px;" data-index="20"
value={SpecialInstructions20} onchange={handleDataChange} label="Special
Instructions(requested package size, etc.)"></lightning-input>
</div>
</lightning-card>
<br><br>

<!--Account information-->
<!-- <lightning-card title="Account information"
class="custom-card"></lightning-card> -->
<lightning-card class="custom-card">
<h1 slot="title" style="color: white;">Account information</h1>
</lightning-card>
<lightning-card>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Company Name" name="CompanyName" data-
index="4" value={CompanyName4} style="width: 370px;position: relative;left: 51px;"
onchange={handleDataChange} required></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Address" name="Address" data-index="5"
value={Address5} style="width: 370px;position: relative;left: 51px;"
onchange={handleDataChange} required></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-combobox
name="Salutation"
id="Salutation"
label="Salutation"
options={unityOfSalutation}
onchange={handleSalutation}
value={selectedSalutation}
style="width: 200px; position: relative;left: 51px;"
required>
</lightning-combobox>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input data-index="55" value={Address55}
onchange={handleDataChange} style="width: 370px;position: relative;left:
51px;"></lightning-input>
<lightning-input data-index="56" value={Address56}
onchange={handleDataChange} style="width: 370px;position: relative;left:
51px;"></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="First Name" name="FirstName"
value={FirstName6} onchange={handleDataChange} data-index="6" style="width:
370px;position: relative;left: 51px;" required></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="City" name="City" value={City7}
onchange={handleDataChange} data-index="7" style="width: 370px;position:
relative;left: 51px;" required></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Middle intial" name="MiddleInitial"
value={MiddleInitial8} onchange={handleDataChange} data-index="8" style="width:
370px;position: relative;left: 51px;"></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-combobox
name="State"
label="State"
options={unityOfState}
onchange={handleState}
value={selectedState}
style="width: 200px; position: relative;left: 51px;"
required>
</lightning-combobox>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Last Name" name="LastName"
value={LastName9} onchange={handleDataChange} data-index="9" style="width:
370px;position: relative;left: 51px;" required></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Province" name="Province"
value={Province10} onchange={handleDataChange} data-index="10" style="width:
370px;position: relative;left: 51px;"></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="E-mail" name="Email" value={Email11}
onchange={handleDataChange} data-index="11" style="width: 370px;position:
relative;left: 51px;" required></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-combobox
name="Country"
label="Country"
options={unityOfCountry}
onchange={handleCountry}
value={selectedCountry}
style="width: 200px; position: relative;left: 51px;"
required>
</lightning-combobox>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Phone" name="Phone" value={Phone12}
onchange={handleDataChange} data-index="12" style="width: 370px;position:
relative;left: 51px;" required></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Postal Code" name="PostalCode"
value={PostalCode13} onchange={handleDataChange} data-index="13" style="width:
370px;position: relative;left: 51px;" required></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Fax" name="Fax" value={Fax14}
onchange={handleDataChange} data-index="14" style="width: 370px;position:
relative;left: 51px;"></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<input type="checkbox" name="Create My Account on the site"
id="checkbox-unique-id-81" value="checkbox-unique-id-81" style="position:relative;
left:66px;" />
<span class="slds-form-element__label" style="left:
78px;position: relative;font-size: small;bottom: 2px;">Create My Account on the
site</span>
<input type="checkbox" name="I have read and accept the
Terms of Use Privacy Policy." id="checkbox-unique-id-82" value="checkbox-unique-
id-81" style="position: relative;right: 137px;top:20px;"/>
<span class="slds-form-element__label" style="position:
relative;font-size: small;left: 92px;bottom: 8px;">I have read and accept the Terms
of Use Privacy Policy.</span>
</div>
<!--reCAPTCHA-->
<lightning-card style="position: relative;left: 50px; width:
433px;height: 122px;">
<label for="check">
<div class="input-container">
<input type="checkbox" class="checkbox" id="check"
style="transform: scale(3);position: relative;left: 31px;top: 29px;">
<span class="checkbox-text" style="font-size:
larger;position: relative;top: 27px;left: 61px;">I'm not a robot</span>
</div>
</label>

<img style="position: relative;bottom: 34px;left: 349px;"

src="https://www.gstatic.com/recaptcha/api2/logo_48.png">
<span class="recaptcha" style="position: relative; left:
290px; font-size: small;">reCAPTCHA</span>
<br>
<a href="#" style="position: relative;left: 338px;bottom:
23px;font-size: x-small;color: gray;">Privacy</a>
<span class="dash" style="position: relative;left:
338px;bottom: 23px;font-size: x-small;color: gray;">-</span>
<a href="#" style="position: relative;left: 338px;bottom:
23px;font-size: x-small;color: gray;">Terms</a>

<div class="triangle"></div>

<!-- <div class="not-human">

<input type="text" class="captcha-code" placeholder="Type
the text">
<div class="line"></div>
<img src="https://i.imgur.com/YvGc2Tt.png">
<div class="controls">
 <div class="img replay"></div>
<div class="img audio"></div>
<div class="img info"></div>
<input type="button" class="verify" value="Verify">
</div>
</div> -->
</lightning-card>
<div class="slds-col slds-size_1-of-2">
<lightning-button class="custom-card" onclick={handleSubmit}
label="Submit" style="position: relative; left: 235px;"></lightning-button>
</div>
</div>
</lightning-card>

<!-- </div> -->

</template>