<!--Use template if:true to display/hide popup based on isModalOpen value--> 
   <template if:true={isModalOpen}>
    <!-- Modal/Popup Box LWC starts here -->
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <!-- Modal/Popup Box LWC header here -->
            <header class="slds-modal__header">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                    <lightning-icon icon-name="utility:close"
                        alternative-text="close"
                        variant="inverse"
                        size="small" ></lightning-icon>
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Guest User Registration</h2>
            </header>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <form class="form-fields">
                    <div class="form-grid">
                        <div class="form-col-1">
                            <lightning-input type="text" label="First Name" placeholder="Enter your first name" onchange={handleFirstNameChange}></lightning-input>
                            <lightning-input type="text" label="Last Name" placeholder="Enter your last name" onchange={handleLastNameChange}></lightning-input>
                            <lightning-input type="email" label="Email" placeholder="Enter your email" onchange={handleEmailChange}></lightning-input>
                        </div>
                        <div class="form-col-2">
                            <lightning-input type="tel" label="Phone Number" placeholder="Enter your phone number" onchange={handlePhoneChange}></lightning-input>
                         <!--  <lightning-input type="text" label="Company Name" placeholder="Enter your company name" onchange={handleCompanyNameChange}></lightning-input> --> 
                            <lightning-input type="date" label="Birthdate" placeholder="Enter your birthdate" onchange={handleBirthdateChange}></lightning-input> 
                        </div>
                    </div>
                </form>
            </div>

                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                    <button class="slds-button slds-button_brand" onclick={handleSave} title="Save">Save</button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>

import { LightningElement,track } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import { NavigationMixin } from 'lightning/navigation';

export default class NewHomePage extends LightningElement {
    @track firstName = '';
    @track lastName = '';
    @track email = '';
    @track phone = '';
    @track companyname = '';
    @track birthdate = '';
    @track isModalOpen = false;

    handleFirstNameChange(event) {
        this.firstName = event.target.value;
    }

    handleLastNameChange(event) {
        this.lastName = event.target.value;
    }

    handleEmailChange(event) {
        this.email = event.target.value;
    }

    handlePhoneChange(event) {
        this.phone = event.target.value;
    }

    handleBirthdateChange(event) {
        this.birthdate = event.target.value;
    }

    handleSave() {
        const fields = {
            FirstName: this.firstName,
            LastName: this.lastName,
            Email: this.email,
            Birthdate : this.birthdate,
            Phone: this.phone
        };

        const recordInput = { apiName: CONTACT_OBJECT.objectApiName, fields };

        createRecord(recordInput)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Contact created',
                        variant: 'success'
                    })
                );
                this.isModalOpen = false;
                this.firstName = '';
                this.lastName = '';
                this.email = '';
                this.birthdate = '';
                this.phone = '';

                this[NavigationMixin.Navigate]({
                    type: 'standard__webComponent',
                    attributes: {
                        webComponentName: 'c__questionFormPage',  // questionFormPage is lwc component
                    },
                    state: {
                        c__recordId: contact.id
                    }
                });
            })

            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating contact',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });

    }
    

    openModal() {
        this.isModalOpen = true;
    }
    closeModal() {
        this.isModalOpen = false;
    }
}