var ___HomeContext = React.createContext();
class HomeContextProvider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            contextState: {
                login: {
                    visible: false,
                    activeIndex: 3,
                    moduleCode: ""
                }
            }
        };
    }
    setContextState = async (state) => {
        await this.setState({ contextState: state });
    }
    render = () => {
        var { children } = this.props;
        var { contextState } = this.state;
        var { setContextState } = this;
        return (<___HomeContext.Provider value={{ contextState, setContextState }}>
            {children}
        </___HomeContext.Provider>);
    }
}

class HomeComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            formData: {
                UserType: ""
            },
            ActiveIndex: undefined
        };
        this.ref_ThirdPartyVerification = React.createRef();
    }
    componentDidMount = async () => {
    }
    showLoginPanel = () => {
        var { contextState, setContextState } = this.context;
        let login = contextState.login;
        login.visible = true;
        setContextState({ login: { ...login } });
    }
    getLoginComponent = () => {
        var { contextState, setContextState } = this.context;
        let { login } = contextState;
        if (login.visible) {
            return (<div className="login-sec">
                <LoginMainComponent ActiveIndex={this.state.ActiveIndex} />

            </div>);
        }
        return <React.Fragment />;
    }

    ContextMenu = (e) => {
        var menu = document.getElementById("contextMenuUsername");
        $(menu).find(".dropdown-toggle").dropdown('toggle');
        menu.style.left = e.pageX + "px";
        menu.style.top = e.pageY + "px";
    }
    ContextMenuUndermaintenance = (e) => {
        var menu = document.getElementById("contextMenuUndermaintenance");
        $(menu).find(".dropdown-toggle").dropdown('toggle');
        menu.style.left = e.pageX + "px";
        menu.style.top = e.pageY + "px";
    }
    LoginAsCitizen = async () => {
        let _state = this.state;
        _state.ActiveIndex = 3;
        await this.setState({ state: { ..._state } });

        await this.showLoginPanel();
        var menu = document.getElementById("contextMenuUsername");
    }
    LoginAsAdministrative = async () => {
        let _state = this.state;
        _state.ActiveIndex = 2;
        await this.setState({ state: { ..._state } });
        await this.showLoginPanel();
        var menu = document.getElementById("contextMenuUsername");
    }
    RedirectToHoldingtax = async () => {
        window.location.replace("https://holdingtax.co.in");
    }
    scrollToLoginSection = () => {
        $('html, body').animate({
            scrollTop: parseInt($(".login-sec").offset().top - 115)
        }, 500);
    }
    ThirdPartyVerificationModel = async () => {
        this.ref_ThirdPartyVerification.current._show();
    }
    render = () => {
        var { contextState, setContextState } = this.context;
        return (<React.Fragment>
            {this.getLoginComponent()}
            <div className="homebanner-sec">
                <div id="myCarousel" className="carousel slide" data-ride="carousel">
                    {/*Indicators */}
                    <ol className="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" className="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        {/*<li data-target="#myCarousel" data-slide-to="2"></li>*/}
                    </ol>

                    {/* Wrapper for slides */}
                    <div className="carousel-inner">
                        {/*<div className="item active"><img src="/Contents/Theme/images/banner1.jpg" alt="" style={{ width: '100%' }} /></div>*/}
                        <div className="item active"> <img src="/Contents/Theme/images/banner3.jpg" alt="" style={{ width: '100%' }} /></div>
                        <div className="item "><img src="/Contents/Theme/images/banner5.jpg" alt="" style={{ width: '100%' }} /></div>
                        <div className="item"> <img src="/Contents/Theme/images/banner4.jpg" alt="" style={{ width: '100%' }} /></div>
                    </div>
                    {/* Left and right controls */}
                    <a className="left carousel-control" href="#myCarousel" data-slide="prev"> <span className="glyphicon glyphicon-chevron-left"></span> <span className="sr-only">Previous</span> </a> <a className="right carousel-control" href="#myCarousel" data-slide="next"> <span className="glyphicon glyphicon-chevron-right"></span> <span className="sr-only">Next</span> </a>
                </div>
            </div>
            {/* Header Banner Section End*/}
            <div className="main-activities-status" id="section1">
                <div className="container">
                    <div className="row">
                        <div className="col-md-3 col-sm-12">
                            <div className="content_menu_title">
                                <h2 style={{ color: "unset" }}>Activities</h2>
                                <div className="menu-desc"><p>Your opinion matters, please help us improve our performance by constantly advising us.</p></div>
                            </div>
                        </div>
                        <div className="col-md-6 col-sm-9 col-xs-12">
                            <nav id="block-menu-menu-content-menu" className="block block-menu">
                                <div className="content">
                                    <ul className="menu clearfix">
                                        <li className="first leaf groups" data-menu-parent="menu-content-menu-1"><a href="#0" title="Downloads " accessKey="g" className="menu-content-menu-1">Downloads </a><span>Downloads</span></li>
                                        <li className="leaf home do" data-menu-parent="menu-content-menu-1"><a href="#0" title="Notices" accessKey="d" className="menu-content-menu-1">Notices</a><span>Notices</span></li>
                                        <li className="leaf home discuss" data-menu-parent="menu-content-menu-1"><a href="#0" title="Up Coming" className="menu-content-menu-1">Up Coming</a><span>Up Coming</span></li>
                                        <li className="leaf home poll" data-menu-parent="menu-content-menu-1"><a href="#0" title="Grievances" className="menu-content-menu-1">Grievances</a><span>Grievances</span></li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                        <div className="col-md-3 col-sm-3 col-xs-12">
                            <div className="user_tblock">
                                <div className="today_user">
                                    <i></i>
                                    <div className="user-count">0</div>
                                </div>
                                Active Users
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="container body-content sm_body-content">
                <div className="row new-area" style={{ textAlign: "center" }}>
                    <div className="col-md-12 col-sm-12">
                        <h2 className="page-header12">WHAT'S NEW</h2>
                    </div>
                </div>
                <div className="row new-area">
                    <div className="col-md-4 col-sm-12">
                        <div className="geeks"
                            onClick={async (e) => {
                                try {
                                    await this.ContextMenu(e);
                                    let login = contextState.login;
                                    login.moduleCode = "ST";
                                    await setContextState({ ...contextState, login: { ...login } });
                                }
                                finally { }
                            }}
                        > <img src="/Contents/Theme/images/constructionmaterial.jpg" alt="" /></div>
                        <p className="page-header1" >Permission for Storage of Construction Material</p>
                    </div>
                    <div className="col-md-4 col-sm-12">
                        <div className="geeks"
                            onClick={async (e) => {
                                try {
                                    await this.ContextMenu(e);
                                    let login = contextState.login;
                                    login.moduleCode = "MV";
                                    await setContextState({ ...contextState, login: { ...login } });
                                }
                                finally { }
                            }}
                        > <img src="/Contents/Theme/images/movie-shooting.jpg" alt="" /></div>
                        <p className="page-header1">Permission for Movie Shooting</p>
                    </div>
                    <div className="col-md-4 col-sm-12">
                        <div className="geeks"
                            onClick={async (e) => {
                                try {
                                    await this.ContextMenu(e);
                                    let login = contextState.login;
                                    login.moduleCode = "RC";
                                    await setContextState({ ...contextState, login: { ...login } });
                                }
                                finally { }
                            }}
                        > <img src="/Contents/Theme/images/roadcutting.jpg" alt="" /></div>
                        <p className="page-header1">Permission for Road Cutting</p>
                    </div>
                </div>
                <div className="row new-area" style={{ textAlign: "center" }}>
                    <div className="col-md-12 col-sm-12">
                        <h2 className="page-header12">IN FOCUS</h2>
                    </div>
                </div>
                <div className="row new-area">
                    <div className="col-md-4 col-sm-12">
                        <div className="geeks"
                            onClick={async (e) => {
                                try {
                                    await this.ContextMenu(e);
                                    let login = contextState.login;
                                    login.moduleCode = "MUTA";
                                    await setContextState({ ...contextState, login: { ...login } });
                                }
                                finally { }
                            }}
                        > <img src="/Contents/Theme/images/e-mutation.jpg" alt="" /></div>
                        <p className="page-header1">e-Mutation</p>
                    </div>
                    <div className="col-md-4 col-sm-12">
                        <div className="geeks"
                            onClick={async (e) => {
                                try {
                                    await this.RedirectToHoldingtax(e);
                                }
                                finally { }
                            }}
                        > <img src="/Contents/Theme/images/optics.jpg" alt="" /></div>
                        <p className="page-header1">OPTICS (Anytime Anywhere)</p>
                    </div>
                    <div className="col-md-4 col-sm-12">
                        <div className="geeks"
                            onClick={async (e) => {
                                try {
                                    await this.LoginAsCitizen(e);
                                    let login = contextState.login;
                                    login.moduleCode = "KP";
                                    await setContextState({ ...contextState, login: { ...login } });
                                    this.scrollToLoginSection();
                                }
                                finally { }
                            }}
                        > <img src="/Contents/Theme/images/know-your-property.jpg" alt="" /></div>
                        <p className="page-header1">Know Your Property</p>
                    </div>
                </div>
                <div className="row new-area">
                    <div className="col-md-4 col-sm-12">
                        <div className="geeks"
                            onClick={async () => {
                                await this.ThirdPartyVerificationModel();
                            }}
                        > <img src="/Contents/Theme/images/thirdpartyverification2.png" alt="" style={{height:"255px"} } /></div>
                        <ThirdPartyVerification ref={this.ref_ThirdPartyVerification} />
                        <p className="page-header1">Third Party Verification</p>

                        {/*onClick={async (e) => {*/}
                        {/*    try {*/}
                        {/*        await this.ContextMenuUndermaintenance(e);*/}
                        {/*        let login = contextState.login;*/}
                        {/*        login.moduleCode = "TPV";*/}
                        {/*        await setContextState({ ...contextState, login: { ...login } });*/}
                        {/*    }*/}
                        {/*    finally { }*/}
                        {/*}}*/}

                    </div>
                    <div className="col-md-4 col-sm-12">
                        <div className="geeks"
                            onClick={async (e) => {
                                try {
                                    await this.LoginAsCitizen(e);
                                    let login = contextState.login;
                                    login.moduleCode = "NDC";
                                    await setContextState({ ...contextState, login: { ...login } });
                                    this.scrollToLoginSection();
                                }
                                finally { }
                            }}
                        > <img src="/Contents/Theme/images/noduescertificate2.png" alt="" /></div>
                        <p className="page-header1">No Dues Certificate (for Property Tax)</p>
                    </div>
                    <div className="col-md-4 col-sm-12">
                    </div>
                </div>
            </div>
            <div className="dropdown" id="contextMenuUsername" style={{ position: "absolute" }}>
                <button className="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style={{ display: "none" }}>Dropdown Example
                    <span className="caret"></span></button>
                <ul className="dropdown-menu" style={{ height: "75px", width: '101px' }}>
                    <li>
                        <a value="menu2:action-1"
                            style={{ cursor: "pointer", fontSize: "17px" }}
                            onClick={async (e) => {
                                try {
                                    let data = "CZ";
                                    let _state = this.state.formData;
                                    _state.UserType = data;
                                    await this.setState({ formData: { ..._state } });
                                    await this.LoginAsCitizen(e);
                                    this.scrollToLoginSection();
                                }
                                finally { }
                            }}
                        >Login as Citizen</a>
                    </li>
                    <li>
                        <a value="menu2:action-2"
                            style={{ cursor: "pointer", fontSize: "17px" }}
                            onClick={async (e) => {
                                try {
                                    let data = "ULB";
                                    let _state = this.state.formData;
                                    _state.UserType = data;
                                    await this.setState({ formData: { ..._state } });
                                    await this.LoginAsAdministrative(e);
                                    this.scrollToLoginSection();
                                }
                                finally { }
                            }}
                        >Login as ULB</a>
                    </li>
                </ul>
            </div>

            {/*<div className="dropdown" id="contextMenuUndermaintenance" style={{ position: "absolute" }}>*/}
            {/*    <button className="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style={{ display: "none" }}>Dropdown Example*/}
            {/*        <span className="caret"></span></button>*/}
            {/*    <ul className="dropdown-menu" style={{ height: "43px", width: '101px' }}>*/}
            {/*        <li>*/}
            {/*            <a value="menu2:action-1"*/}
            {/*                style={{ cursor: "pointer", fontSize: "14px", color: "red" }}*/}
            {/*                onClick={async () => {*/}
            {/*                    await this.ThirdPartyVerificationModel();*/}
            {/*                }}*/}
            {/*            >Under Maintenance</a>*/}
            {/*            <ThirdPartyVerification ref={this.ref_ThirdPartyVerification}/>*/}
            {/*        </li>*/}
            {/*    </ul>*/}
            {/*</div>*/}
            {/*<ChatPopup />*/}

        </React.Fragment>);
    }
}

class LoginMainComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            ActiveIndex: 3
        };
    }
    componentDidMount = async () => {
        if (this.props.ActiveIndex != undefined) {
            let _state = this.state;
            _state.ActiveIndex = this.props.ActiveIndex;
            await this.setState({ state: { ..._state } });
        }
        else {
            let _state = this.state;
            _state.ActiveIndex = 3;
            await this.setState({ state: { ..._state } });
        }
        var { contextState, setContextState } = this.context;
        // console.log(contextState)
    }
    componentWillReceiveProps = async () => {

        if (this.props.ActiveIndex != undefined) {
            let _state = this.state;
            _state.ActiveIndex = this.props.ActiveIndex;
            await this.setState({ state: { ..._state } });
        }
        else {
            let _state = this.state;
            _state.ActiveIndex = 3;
            await this.setState({ state: { ..._state } });
        }
    }
    onChangeActiveIndex = async (index) => {
        let _state = this.state;
        _state.ActiveIndex = index;
        await this.setState({ state: { ..._state } });
    }
    render = () => {
        var { contextState, setContextState } = this.context;
        let activeIndex = this.state.ActiveIndex;
        return (<React.Fragment>
            <div className="container-fluid login-container">
                <div className="row">
                    <div className="col-md-1" />
                    <div className="col-md-10">
                        <div className="panel panel-primary m-5">
                            <div className="panel-body pd-b-0">
                                <div className="flex-container">
                                    <div className="flex-child" style={{ flexBasis: '100%' }}>
                                        <ul className="nav nav-pills nav-justified">

                                            <li onClick={async () => { await this.onChangeActiveIndex(0); }} className={`cursor-pointer ${activeIndex == 0 ? "active" : ""}`}>
                                                <a>Administration</a>
                                            </li>
                                            <li onClick={async () => { await this.onChangeActiveIndex(1); }} className={`cursor-pointer ${activeIndex == 1 ? "active" : ""}`}>
                                                <a>DDO Login</a>
                                            </li>
                                            <li onClick={async () => { await this.onChangeActiveIndex(2); }} className={`cursor-pointer ${activeIndex == 2 ? "active" : ""}`}><a>ULB/DA</a></li>
                                            {/*<li onClick={async () => { await this.onChangeActiveIndex(2); }} className={`cursor-pointer ${activeIndex == 2 ? "active" : ""}`}><a>Property Tax Online</a></li>*/}
                                            <li onClick={async () => { await this.onChangeActiveIndex(3); }} className={`cursor-pointer ${activeIndex == 3 ? "active" : ""}`}><a>Citizen Services</a></li>
                                            {/*<li onClick={async () => { await this.onChangeActiveIndex(4); }} className={`cursor-pointer ${activeIndex == 4 ? "active" : ""}`}>*/}
                                            {/*    <a>Home</a>*/}
                                            {/*</li>*/}
                                        </ul>
                                    </div>
                                    <div className="flex-child" style={{ flex: '0 0 50px', alignSelf: 'center' }}>
                                        <i className="fa fa-times fa-2x cursor-pointer" aria-hidden="true" style={{}}
                                            onClick={async (e) => {
                                                e.preventDefault();
                                                let login = contextState.login;
                                                login.visible = false;
                                                await setContextState({ ...contextState, login: { ...login } });
                                            }}
                                        ></i>
                                    </div>
                                </div>
                                <div className="tab-content mt-10" >
                                    <div className={`tab-pane fade  ${activeIndex == 0 ? "active in" : ""}`}>
                                        <div className="row" style={{ background: '#f1f2ff' }}>
                                            <div className="col-md-2"></div>
                                            <div className="col-md-8">
                                                <LoginAdministrativeComponent />
                                            </div>
                                        </div>
                                    </div>
                                    <div className={`tab-pane fade  ${activeIndex == 1 ? "active in" : ""}`}>
                                        <div className="row" style={{ background: '#f1f2ff' }}>
                                            <br />
                                            <LoginFoLoginComponent />
                                        </div>
                                    </div>
                                    <div className={`tab-pane fade  ${activeIndex == 2 ? "active in" : ""}`}>
                                        <div className="row" style={{ background: '#f1f2ff' }}>
                                            <br />
                                            <LoginULBDAComponent />
                                        </div>
                                    </div>
                                    <div className={`tab-pane fade  ${activeIndex == 3 ? "active in" : ""}`}>
                                        <div className="row" style={{ background: '#f1f2ff' }}>
                                            <div className="col-md-4">
                                                <ul className="mt-10">
                                                    <li>
                                                        <h4>(Other Services - Citizen Login)</h4>
                                                        <ol style={{ listStyle: 'auto' }}>
                                                            <li>Mobile Tower/OFC NOC for ULB Properties excluding KMC</li>
                                                            <li>Construction Storage Permission</li>
                                                            <li>Movie Shooting Permission</li>
                                                            <li>Road Cutting Permission</li>
                                                            <li>Know your Property</li>
                                                            <li>Mutation</li>
                                                        </ol>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div className="col-md-8">
                                                <LoginOtherServicesComponent />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </React.Fragment>);
    }
}

class LoginAdministrativeComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            isSaving: false,
            saveBtnText: "Login",
            formData: {
                AdminType: 0,
                UserName: "",
                Password: ""
            },
            adminTypes: [
                {
                    adminType: "2", title: "Financial Department", adminTypeName: "UDMA"
                },
                {
                    adminType: "3", title: "District Magistrate", adminTypeName: "DM"
                }
            ]

        };
        this.ref_frm = React.createRef();
    }
    componentDidMount = async () => {
    }

    doLogin = async () => {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: 'POST',
                url: "/Home/AdminstrativeLogin",
                data: JSON.stringify(this.state.formData),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (r) {
                    if (r.Status == 200) {
                        resolve(r.Data);

                    } else {
                        reject(r.Message);
                    }
                },
                error: function (r, a, b) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        });
    }
    render = () => {
        return (<React.Fragment>
            <div className="row">
                <form ref={this.ref_frm} role="form" autoComplete="off" noValidate="noValidate">
                    <div className="col-md-3">
                        <div className="form-group">
                            <label htmlFor="ActionText">Admin Type</label>
                            <select className="form-control" name="ddlAdminType" required
                                onChange={async (e) => {
                                    let data = e.target.value || "";
                                    let _state = this.state.formData;
                                    _state.AdminType = data;
                                    await this.setState({ formData: { ..._state } });
                                }}
                                value={this.state.AdminType}
                            >
                                <option value="">--select type--</option>
                                {this.state.adminTypes.map((t, i) => {
                                    return (<option key={i} value={t.adminType} title={t.title}>{t.adminTypeName}</option>);
                                })}
                            </select>
                        </div>
                    </div>
                    <div className="col-md-3">
                        <div className="form-group">
                            <label htmlFor="ActionText">User Name</label>
                            <input type="text" className="form-control valid" autoComplete="off"
                                required
                                name="txtAdmUserName" placeholder="User Name"
                                onChange={async (e) => {
                                    let data = e.target.value || "";
                                    let _state = this.state.formData;
                                    _state.UserName = data;
                                    await this.setState({ formData: { ..._state } });
                                }}
                                value={this.state.formData.UserName}
                            />
                        </div>
                    </div>
                    <div className="col-md-3">
                        <div className="form-group">
                            <label htmlFor="ActionName">Password</label>
                            <input type="password" className="form-control valid"
                                required
                                autoComplete="off" name="txtAdmPassword" placeholder="Password"
                                onChange={async (e) => {
                                    let data = e.target.value || "";
                                    let _state = this.state.formData;
                                    _state.Password = data;
                                    await this.setState({ formData: { ..._state } });
                                }}
                                value={this.state.formData.Password}
                            />
                        </div>
                    </div>
                    <div className="col-md-3 mt-25">
                        <button type="button" className="btn btn-primary form-control"
                            disabled={this.state.isSaving}
                            onClick={async () => {
                                try {
                                    if (!$(this.ref_frm.current).valid()) {
                                        return;
                                    }
                                    await this.setState({ ...this.state, isSaving: true, saveBtnText: "Please wait.." });
                                    let data = await this.doLogin();
                                    window.location.href = data.RedirectUrl;
                                } catch (e) {
                                    await this.setState({ ...this.state, isSaving: false, saveBtnText: "Login" });
                                    if (typeof (e) == "string")
                                        alertify.error(e);
                                    else {
                                        alertify.error("Unable to login! Try again");
                                        console.error(e);
                                    }
                                }
                            }}
                        >
                            {this.state.saveBtnText}</button>
                    </div>
                </form>
            </div>
        </React.Fragment >);
    }
}

class LoginFoLoginComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            isSaving: false,
            saveBtnText: "Login",
            formData:
            {
                MunicipalityID: "",
                UserName: "",
                Password: ""
            },
            DistrictID: 0,
            distList: [],
            muniList: []
        };
        this.ref_frm = React.createRef();
    }
    componentDidMount = async () => {
        await this.GetDistricts();

    }
    GetDistricts = function () {
        var $this = this;
        $.ajax({
            type: "POST",
            url: "/Shared/District/GetDistricts",
            data: null,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                if (response.Status != 200) {
                    alertify.error(response.Message);
                    return;
                }
                else {
                    let _distList = response.Data;
                    $this.setState({ distList: _distList });
                    //$this.state.distList = _distList;                   
                }

            },
            error: function (response, a, b) {
                reject(window.ajaxError(response, a, b));
            }
        });
    };
    GetMunicipalityByDistID = function () {
        return new Promise((resolve, reject) => {
            var $this = this;
            var data = $this.state.DistrictID;
            $.ajax({
                type: "POST",
                url: "/Shared/Municipality/GetMunicipalitesByDistrictID",
                data: "{DistrictID:" + data + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response.Status != 200) {
                        alertify.error(response.Message);
                        return;
                    }
                    else {
                        let _muniList = response.Data;
                        $this.setState({ muniList: _muniList });

                    }

                },
                error: function (response, a, b) {
                    reject(window.ajaxError(response, a, b));
                }
            });
        })
    };
    CollectorLogin = async () => {
        var $this = this;
        var data = $this.state.formData;
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Home/FinanceOfficerLogin",
                data: JSON.stringify(this.state.formData),
                dataType: "json",
                success: function (r) {
                    if (r.Status == 200) {
                        resolve(r.Data);
                    } else {
                        reject(r.Message);
                    }
                },
                error: function (r, a, b) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };
    render = () => {
        var { contextState, setContextState } = this.context;
        return (<React.Fragment>
            <form role="form" ref={this.ref_frm} role="form" autoComplete="off" noValidate="noValidate">
                <div className="form-group col-md-2">
                    <label htmlFor="ActionText">District</label>
                    <select className="form-control"
                        required
                        onChange={async (e) => {
                            let data = e.target.value || "";
                            let _state = this.state;
                            _state.DistrictID = data;
                            await this.setState({ DistrictID: _state.DistrictID });
                            await this.GetMunicipalityByDistID();
                        }}
                        value={this.state.DistrictID}
                    >
                        <option value="">--select--</option>
                        {this.state.distList.map((t, i) => {
                            return (<option key={i} value={t.DistrictID} title={t.DistrictName}>{t.DistrictName}</option>);
                        })}
                    </select>
                </div>
                <div className="form-group col-md-4">
                    <label htmlFor="ActionText">ULB/DA</label>
                    <select className="form-control"
                        required
                        onChange={async (e) => {
                            let data = e.target.value || "";
                            let _state = this.state.formData;
                            _state.MunicipalityID = data;
                            await this.setState({ formData: { ..._state } });
                        }}
                        value={this.state.formData.MunicipalityID}
                    >
                        <option value="">--select--</option>
                        {this.state.muniList.map((t, i) => {
                            return (<option key={i} value={t.MunicipalityID} title={t.MunicipalityName}>{t.MunicipalityName}</option>);
                        })}
                    </select>
                </div>
                <div className="form-group col-md-2">
                    <label htmlFor="ActionText">User Name</label>
                    <input type="text" className="form-control valid" autoComplete="off" name="txtAdmUserName" placeholder="User Name"
                        required
                        onChange={async (e) => {
                            let data = e.target.value || "";
                            let _state = this.state.formData;
                            _state.UserName = data;
                            await this.setState({ formData: { ..._state } });
                        }}
                        value={this.state.formData.UserName}
                    />
                </div>
                <div className="form-group col-md-2">
                    <label htmlFor="ActionName">Password</label>
                    <input type="password" className="form-control valid" autoComplete="off" name="txtAdmPassword" placeholder="Password"
                        required
                        onChange={async (e) => {
                            let data = e.target.value || "";
                            let _state = this.state.formData;
                            _state.Password = data;
                            await this.setState({ formData: { ..._state } });
                        }}
                        value={this.state.formData.Password}
                    />
                </div>
                <div className="col-md-2 mt-25">
                    <button type="button" className="btn btn-primary"
                        disabled={this.state.isSaving}
                        onClick={async () => {
                            try {
                                if (!$(this.ref_frm.current).valid()) {
                                    return;
                                }
                                await this.setState({ ...this.state, isSaving: true, saveBtnText: "Please wait.." });
                                let data = await this.CollectorLogin();
                                window.location.href = data.RedirectUrl;
                            } catch (e) {
                                await this.setState({ ...this.state, isSaving: false, saveBtnText: "Login" });
                                if (typeof (e) == "string")
                                    alertify.error(e);
                                else {
                                    alertify.error("Unable to login! Try again");
                                    console.error(e);
                                }
                            }
                        }}
                    >
                        {this.state.saveBtnText}</button>
                </div>
            </form>
            <div className="row">
                <div className="col-md-8" style={{ textAlign: "center" }}>
                    <span className="error" ></span>
                </div>
            </div>
            {/*<div className="row"><div className="col-md-8"></div>*/}
            {/*    <div className="col-md-4">*/}
            {/*        <button type="button" className="btn btn-primary" style={{ marginLeft: "215px" }}*/}
            {/*            disabled={this.state.isSaving}*/}
            {/*            onClick={async () => {*/}
            {/*                try {*/}
            {/*                    if (!$(this.ref_frm.current).valid()) {*/}
            {/*                        return;*/}
            {/*                    }*/}
            {/*                    await this.setState({ ...this.state, isSaving: true, saveBtnText: "Please wait.." });*/}
            {/*                    let data = await this.CollectorLogin();*/}
            {/*                    window.location.href = data.RedirectUrl;*/}
            {/*                } catch (e) {*/}
            {/*                    await this.setState({ ...this.state, isSaving: false, saveBtnText: "Login" });*/}
            {/*                    if (typeof (e) == "string")*/}
            {/*                        alertify.error(e);*/}
            {/*                    else {*/}
            {/*                        alertify.error("Unable to login! Try again");*/}
            {/*                        console.error(e);*/}
            {/*                    }*/}
            {/*                }*/}
            {/*            }}*/}
            {/*        >*/}
            {/*            {this.state.saveBtnText}</button>*/}
            {/*    </div>*/}
            {/*</div>*/}
            {/*<br />*/}
        </React.Fragment>);
    }
}
class LoginULBDAComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            isSaving: false,
            saveBtnText: "Login",
            formData:
            {
                MunicipalityID: "",
                UserName: "",
                Password: ""
            },
            DistrictID: 0,
            distList: [],
            muniList: []
        };
        this.ref_frm = React.createRef();
    }
    componentDidMount = async () => {
        await this.GetDistricts();

    }
    GetDistricts = function () {
        var $this = this;
        $.ajax({
            type: "POST",
            url: "/Shared/District/GetDistricts",
            data: null,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                if (response.Status != 200) {
                    alertify.error(response.Message);
                    return;
                }
                else {
                    let _distList = response.Data;
                    $this.setState({ distList: _distList });
                    //$this.state.distList = _distList;                   
                }

            },
            error: function (response, a, b) {
                reject(window.ajaxError(response, a, b));
            }
        });
    };
    GetMunicipalityByDistID = function () {
        return new Promise((resolve, reject) => {
            var $this = this;
            var data = $this.state.DistrictID;
            $.ajax({
                type: "POST",
                url: "/Shared/Municipality/GetMunicipalitesByDistrictID",
                data: "{DistrictID:" + data + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response.Status != 200) {
                        alertify.error(response.Message);
                        return;
                    }
                    else {
                        let _muniList = response.Data;
                        $this.setState({ muniList: _muniList });

                    }

                },
                error: function (response, a, b) {
                    reject(window.ajaxError(response, a, b));
                }
            });
        })
    };
    CollectorLogin = async () => {
        var $this = this;
        var data = $this.state.formData;
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Home/MunicipalityLogin",
                data: JSON.stringify(this.state.formData),
                dataType: "json",
                success: function (r) {
                    if (r.Status == 200) {
                        resolve(r.Data);
                    } else {
                        reject(r.Message);
                    }
                },
                error: function (r, a, b) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };
    render = () => {
        var { contextState, setContextState } = this.context;
        return (<React.Fragment>
            <form role="form" ref={this.ref_frm} role="form" autoComplete="off" noValidate="noValidate">
                <div className="form-group col-md-2">
                    <label htmlFor="ActionText">District</label>
                    <select className="form-control"
                        required
                        onChange={async (e) => {
                            let data = e.target.value || "";
                            let _state = this.state;
                            _state.DistrictID = data;
                            await this.setState({ DistrictID: _state.DistrictID });
                            await this.GetMunicipalityByDistID();
                        }}
                        value={this.state.DistrictID}
                    >
                        <option value="">--select--</option>
                        {this.state.distList.map((t, i) => {
                            return (<option key={i} value={t.DistrictID} title={t.DistrictName}>{t.DistrictName}</option>);
                        })}
                    </select>
                </div>
                <div className="form-group col-md-4">
                    <label htmlFor="ActionText">ULB/DA</label>
                    <select className="form-control"
                        required
                        onChange={async (e) => {
                            let data = e.target.value || "";
                            let _state = this.state.formData;
                            _state.MunicipalityID = data;
                            await this.setState({ formData: { ..._state } });
                        }}
                        value={this.state.formData.MunicipalityID}
                    >
                        <option value="">--select--</option>
                        {this.state.muniList.map((t, i) => {
                            return (<option key={i} value={t.MunicipalityID} title={t.MunicipalityName}>{t.MunicipalityName}</option>);
                        })}
                    </select>
                </div>
                <div className="form-group col-md-2">
                    <label htmlFor="ActionText">User Name</label>
                    <input type="text" className="form-control valid" autoComplete="off" name="txtAdmUserName" placeholder="User Name"
                        required
                        onChange={async (e) => {
                            let data = e.target.value || "";
                            let _state = this.state.formData;
                            _state.UserName = data;
                            await this.setState({ formData: { ..._state } });
                        }}
                        value={this.state.formData.UserName}
                    />
                </div>
                <div className="form-group col-md-2">
                    <label htmlFor="ActionName">Password</label>
                    <input type="password" className="form-control valid" autoComplete="off" name="txtAdmPassword" placeholder="Password"
                        required
                        onChange={async (e) => {
                            let data = e.target.value || "";
                            let _state = this.state.formData;
                            _state.Password = data;
                            await this.setState({ formData: { ..._state } });
                        }}
                        value={this.state.formData.Password}
                    />
                </div>
                <div className="col-md-2 mt-25">
                    <button type="button" className="btn btn-primary"
                        disabled={this.state.isSaving}
                        onClick={async () => {
                            try {
                                if (!$(this.ref_frm.current).valid()) {
                                    return;
                                }
                                await this.setState({ ...this.state, isSaving: true, saveBtnText: "Please wait.." });
                                let data = await this.CollectorLogin();
                                window.location.href = data.RedirectUrl;
                            } catch (e) {
                                await this.setState({ ...this.state, isSaving: false, saveBtnText: "Login" });
                                if (typeof (e) == "string")
                                    alertify.error(e);
                                else {
                                    alertify.error("Unable to login! Try again");
                                    console.error(e);
                                }
                            }
                        }}
                    >
                        {this.state.saveBtnText}</button>
                </div>
            </form>
            <div className="row">
                <div className="col-md-8" style={{ textAlign: "center" }}>
                    <span className="error" ></span>
                </div>
            </div>
            {/*<div className="row"><div className="col-md-8"></div>*/}
            {/*    <div className="col-md-4">*/}
            {/*        <button type="button" className="btn btn-primary" style={{ marginLeft: "215px" }}*/}
            {/*            disabled={this.state.isSaving}*/}
            {/*            onClick={async () => {*/}
            {/*                try {*/}
            {/*                    if (!$(this.ref_frm.current).valid()) {*/}
            {/*                        return;*/}
            {/*                    }*/}
            {/*                    await this.setState({ ...this.state, isSaving: true, saveBtnText: "Please wait.." });*/}
            {/*                    let data = await this.CollectorLogin();*/}
            {/*                    window.location.href = data.RedirectUrl;*/}
            {/*                } catch (e) {*/}
            {/*                    await this.setState({ ...this.state, isSaving: false, saveBtnText: "Login" });*/}
            {/*                    if (typeof (e) == "string")*/}
            {/*                        alertify.error(e);*/}
            {/*                    else {*/}
            {/*                        alertify.error("Unable to login! Try again");*/}
            {/*                        console.error(e);*/}
            {/*                    }*/}
            {/*                }*/}
            {/*            }}*/}
            {/*        >*/}
            {/*            {this.state.saveBtnText}</button>*/}
            {/*    </div>*/}
            {/*</div>*/}
            {/*<br />*/}
        </React.Fragment>);
    }
}

class LoginPropertyTaxCitizenComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            isSaving: false,
            saveBtnText: "Proceed",
            formData: {
                MunicipalityID: 0,
                WardID: 0,
                LocationID: 0,
                HoldingNo: "",
            },
            distList: [],
            muniList: [],
            wardList: [],
            locationList: []
        };
        this.uuid = uuid();
        this.ref_frm = React.createRef();
    }
    componentDidMount = async () => {
        await this.GetDistrictList();
    }
    GetDistrictList = function () {
        var $this = this;
        $.ajax({
            type: "POST",
            url: "/Shared/District/GetDistricts",
            data: null,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                if (response.Status != 200) {
                    alertify.error(response.Message);
                    return;
                }
                else {
                    let _distList = response.Data;
                    $this.setState({ distList: _distList });
                }

            },
            error: function (response, a, b) {
                reject(window.ajaxError(response, a, b));
            }
        });
    };
    GetMunicipalityListByDistID = function () {
        return new Promise((resolve, reject) => {
            var $this = this;
            var data = $this.state.DistrictID;
            $.ajax({
                type: "POST",
                url: "/Shared/Municipality/GetMunicipalitesByDistrictID",
                data: "{DistrictID:" + data + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response.Status != 200) {
                        alertify.error(response.Message);
                        return;
                    }
                    else {
                        let _muniList = response.Data;
                        $this.setState({ muniList: _muniList });

                    }

                },
                error: function (response, a, b) {
                    reject(window.ajaxError(response, a, b));
                }
            });
        })
    };
    GetWardsListByMuniID = function () {
        var $this = this;
        return new Promise((resolve, reject) => {
            var E = "{MunicipalityID: '" + this.state.formData.MunicipalityID + "',WardName: ''} ";
            $.ajax({
                type: "POST",
                url: "/Shared/Ward/GetWards",
                data: E,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response.Status != 200) {
                        alertify.error(response.Message);
                        return;
                    }
                    else {
                        let _wardList = response.Data;
                        $this.setState({ wardList: _wardList });
                    }

                },
                error: function (response, a, b) {
                    reject(window.ajaxError(response, a, b));
                }
            });
        })
    };
    GetLocationListByWardID = function () {
        var $this = this;
        return new Promise((resolve, reject) => {
            var E = "{MunicipalityID: '" + this.state.formData.MunicipalityID + "',wardID:'" + this.state.formData.WardID + "',locationName:'' } ";
            $.ajax({
                type: "POST",
                url: "/Shared/Location/GetLocations",
                data: E,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response.Status != 200) {
                        alertify.error(response.Message);
                        return;
                    }
                    else {
                        let _locationList = response.Data;
                        $this.setState({ locationList: _locationList });
                    }
                },
                error: function (response, a, b) {
                    reject(window.ajaxError(response, a, b));
                }
            });
        })
    };
    CitizenLogin = async () => {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Home/CitizenLogin",
                data: JSON.stringify(this.state.formData),
                dataType: "json",
                success: function (r) {
                    if (r.Status == 200) {
                        resolve(r.Data);
                    } else {
                        reject(r.Message);
                    }
                },
                error: function (r, a, b) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };
    render = () => {
        return (<React.Fragment>
            <div className="row" style={{ textAlign: "center", marginTop: "2px" }}>
                <label>Click Here</label>
            </div>
            <div className="row" style={{ display: "none" }}>
                <div className="col-md-12 mt-10">
                    <form ref={this.ref_frm} role="form" role="form" autoComplete="off" noValidate="noValidate">
                        <div className="form-group">
                            <label htmlFor="ActionText">District</label>
                            <select className="form-control" name="ddlAdminType"
                                required
                                name={`txt-dist-${this.uuid}`}
                                onChange={async (e) => {
                                    let data = e.target.value || "";
                                    let _state = this.state;
                                    _state.DistrictID = data;
                                    await this.setState({ DistrictID: _state.DistrictID });
                                    await this.GetMunicipalityListByDistID();
                                }}
                                value={this.state.DistrictID}
                            >
                                <option value="">--select--</option>
                                {this.state.distList.map((t, i) => {
                                    return (<option key={i} value={t.DistrictID} title={t.DistrictName}>{t.DistrictName}</option>);
                                })}

                            </select>
                        </div>
                        <div className="form-group">
                            <label htmlFor="ActionText">ULB</label>
                            <select className="form-control"
                                name={`txt-ulb-${this.uuid}`}
                                required
                                onChange={async (e) => {
                                    let data = e.target.value || "";
                                    let _state = this.state.formData;
                                    _state.MunicipalityID = data;
                                    await this.setState({ formData: { ..._state } });
                                    await this.GetWardsListByMuniID();
                                }}
                                value={this.state.formData.MunicipalityID}
                            >
                                <option value="">--select--</option>
                                {this.state.muniList.map((t, i) => {
                                    return (<option key={i} value={t.MunicipalityID} title={t.MunicipalityName}>{t.MunicipalityName}</option>);
                                })}
                            </select>
                        </div>
                        <div className="form-group">
                            <label htmlFor="ActionText">Ward</label>
                            <select className="form-control"
                                required
                                name={`txt-ward-${this.uuid}`}
                                onChange={async (e) => {
                                    let data = e.target.value || "";
                                    let _state = this.state.formData;
                                    _state.WardID = data;
                                    await this.setState({ formData: { ..._state } });
                                    await this.GetLocationListByWardID();
                                }}
                                value={this.state.formData.WardID}
                            >
                                <option value="">--select--</option>
                                {this.state.wardList.map((t, i) => {
                                    return (<option key={i} value={t.WardID} title={t.WardName}>{t.WardName}</option>);
                                })}
                            </select>
                        </div>
                        <div className="form-group">
                            <label htmlFor="ActionText">Location</label>
                            <select className="form-control"
                                required
                                name={`txt-location-${this.uuid}`}
                                onChange={async (e) => {
                                    let data = e.target.value || "";
                                    let _state = this.state.formData;
                                    _state.LocationID = data;
                                    await this.setState({ formData: { ..._state } });
                                }}
                                value={this.state.formData.LocationID}
                            >
                                <option value="">--select--</option>
                                {this.state.locationList.map((t, i) => {
                                    return (<option key={i} value={t.LocationID} title={t.LocationName}>{t.LocationName}</option>);
                                })}
                            </select>
                        </div>
                        <div className="form-group">
                            <label htmlFor="ActionName">Holding Number</label>
                            <input type="text" className="form-control valid" autoComplete="off" placeholder="Holding Number"
                                required
                                name={`txt-holding-no-${this.uuid}`}
                                onChange={async (e) => {
                                    let data = e.target.value || "";
                                    let _state = this.state.formData;
                                    _state.HoldingNo = data;
                                    await this.setState({ formData: { ..._state } });
                                }}
                                value={this.state.formData.HoldingNo}
                            />
                        </div>
                        <button type="button" className="btn btn-primary btn-block mb-20"
                            disabled={this.state.isSaving}
                            onClick={async () => {
                                try {
                                    if (!$(this.ref_frm.current).valid()) {
                                        return;
                                    }
                                    await this.setState({ ...this.state, isSaving: true, saveBtnText: "Please wait.." });
                                    let data = await this.CitizenLogin();
                                    window.location.href = data.RedirectUrl;
                                } catch (e) {
                                    await this.setState({ ...this.state, isSaving: false, saveBtnText: "Proceed" });
                                    if (typeof (e) == "string")
                                        alertify.error(e);
                                    else {
                                        alertify.error("Unable to login! Try again");
                                        console.error(e);
                                    }
                                }
                            }}
                        >
                            {this.state.saveBtnText}</button>
                    </form>
                </div>
            </div>
        </React.Fragment>);
    }
}

class LoginOtherServicesComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            isSaving: false,
            saveBtnText: "Login",
            formData:
            {
                UserName: "",
                Password: "",
                ModuleCode: "",
                LoginType: "U"
            },
            LoginTypes: [
                {
                    Type: "U", title: "Username", TypeName: "Username"
                },
                {
                    Type: "M", title: "Mobile No", TypeName: "Mobile No"
                }
            ],
            Type: "",
            randomText: uuid()
        };
        this.ref_frm = React.createRef();
        this.ref_CitizenReg = React.createRef();
        this.ref_ForgetPass = React.createRef();
        this.ref_MobVerification = React.createRef();
        this.ref_MobVerificationforMobile = React.createRef();
        this.Type = "";
    }
    componentDidMount = async () => { }

    OtherCitizenLogin = async () => {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Home/OtherCitizenLogin",
                data: JSON.stringify(this.state.formData),
                dataType: "json",
                success: function (r) {
                    if (r.Status == 200) {
                        resolve(r.Data);
                    } else {
                        reject(r.Message);
                    }
                },
                error: function (r, a, b) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };

    signUpModal = async () => {
        this.ref_CitizenReg.current._show();
    }

    MobileVerificationModal = async () => {
        this.ref_MobVerification.current._show();
    }
    MobileVerificationModalForMobile = async () => {
        this.ref_MobVerificationforMobile.current._show();
    }
    verifyAccountMobile() {
        this.ref_MobileVerfication.current._show();
    }

    render = () => {
        var { contextState, setContextState } = this.context;
        return (<React.Fragment>
            <div className="row">
                <div className="col-md-11 mt-10">
                    <form role="form" ref={this.ref_frm} autoComplete="off" noValidate="noValidate" autoComplete={this.state.randomText}>
                        <div className="row">
                            <div className="col-md-3">
                                <label htmlFor="ActionText">Select Login Type</label>
                                <select className="form-control"
                                    onChange={async (e) => {
                                        let data = e.target.value || "";
                                        let _state = this.state.formData;
                                        _state.LoginType = data;
                                        await this.setState({ formData: { ..._state } });
                                    }}
                                    value={this.state.AdminType}
                                >
                                    {this.state.LoginTypes.map((t, i) => {
                                        return (<option key={i} value={t.Type} title={t.title}>{t.TypeName}</option>);
                                    })}
                                </select>
                            </div>
                            <div className="col-md-4">
                                <div className="form-group">
                                    <label htmlFor="ActionText">{this.state.formData.LoginType == "U" ? "Username" : "Mobile No"}</label>
                                    <input type="text" className="form-control valid" autoComplete="off" name="txtAdmUserName" placeholder={this.state.formData.LoginType == "U" ? "Username" : "Mobile No"}
                                        autoComplete={this.state.randomText}
                                        required
                                        onChange={async (e) => {
                                            let data = e.target.value || "";
                                            let _state = this.state.formData;
                                            _state.UserName = data;
                                            await this.setState({ formData: { ..._state } });
                                        }}
                                        value={this.state.formData.UserName}
                                    />
                                </div>
                            </div>
                            <div className="col-md-3">
                                <div className="form-group">
                                    <label htmlFor="ActionText">Password</label>
                                    <input type="password" className="form-control valid" autoComplete="off" name="txtAdmUserName" placeholder="Password"
                                        autoComplete={this.state.randomText}
                                        required
                                        onChange={async (e) => {
                                            let data = e.target.value || "";
                                            let _state = this.state.formData;
                                            _state.Password = data;
                                            await this.setState({ formData: { ..._state } });
                                        }}
                                        value={this.state.formData.Password} />
                                </div>
                            </div>
                            <div className="col-md-2 mt-26">
                                <button type="button" className="btn btn-primary form-control"
                                    disabled={this.state.isSaving}
                                    onClick={async () => {
                                        try {
                                            if (!$(this.ref_frm.current).valid()) {
                                                return;
                                            }
                                            let _state = this.state.formData;
                                            _state.ModuleCode = contextState.login.moduleCode;
                                            await this.setState({ formData: { ..._state } });
                                            await this.setState({ ...this.state, isSaving: true, saveBtnText: "Wait.." });
                                            let data = await this.OtherCitizenLogin();
                                            window.location.href = data.RedirectUrl;
                                        } catch (e) {
                                            await this.setState({ ...this.state, isSaving: false, saveBtnText: "Login" });
                                            if (typeof (e) == "string")
                                                alertify.error(e);
                                            else {
                                                alertify.error("Unable to login! Try again");
                                                console.error(e);
                                            }
                                        }
                                    }}
                                >
                                    {this.state.saveBtnText}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div className="row mt-5">
                <div className="col-md-11">
                    <a href="#" style={{ float: "right", borderBottom: "2px solid #d5d5d5", color: "blue", marginRight: "12px" }} onClick={async () => { await this.signUpModal() }} className="Btn-Signup" title="Registration">Signup</a>

                    <a href="#" style={{ float: "right", borderBottom: "2px solid #d5d5d5", color: "blue", marginRight: "35px" }}
                        onClick={async () => {
                            await this.MobileVerificationModal();
                        }} className="Btn-Forget" title="Forget Password ?">Forget Password</a>
                    <CitizenMobileVerficationComponent ref={this.ref_MobVerification} ButtonText={"Proceed for Forget Password"} OtpSendText={"GET OTP"} Type={"F"} />

                    <a href="#" className="btn-mverify" style={{ float: "right", borderBottom: "2px solid #d5d5d5", color: "blue", marginRight: "35px" }}
                        onClick={async () => {
                            await this.MobileVerificationModalForMobile();
                        }}
                        title="Verify Mobile No">Verify Account with Mobile No.</a>
                    <CitizenMobileVerficationComponent ref={this.ref_MobVerificationforMobile} ButtonText={"Verify Mobile"} OtpSendText={"Resend OTP"} Type={"R"} />

                </div>
            </div>
            <CitizenRegistrationComponent ref={this.ref_CitizenReg} />
        </React.Fragment >);
    }
}

class CitizenRegistrationComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            isSaving: false,
            saveBtnText: "Register",
            formData: null,
            ImgData: "",
            CaptchaMetaData: ""

        };
        this.ref_Modal = React.createRef();
        this.ref_form = React.createRef();
        this.ref_MobVerification = React.createRef();
        this.ref_otpVerification = React.createRef();
    }
    _resetState = async () => {
        this.setState(initialState);
    }
    defaultFormData = async () => {
        return {
            UserName: "",
            Password: "",
            ConfirmPassword: "",
            Name: "",
            Designation: "",
            Email: "",
            MobileNo: "",
            CompanyName: "",
            CompanyAddress: "",
            IsActive: 0,
            IsOTPVerified: 0,
            TypeOfRegistration: 1,
            signatureData: "",
            signaturePath: "",
            CaptchaCode: "",
            CaptchaText: "",
            msg: ""
        };
    }
    _show = async () => {
        $(this.ref_Modal.current).modal("show");
        this.GetCaptcha();
    }
    _hide = async () => {
        $(this.ref_Modal.current).modal("hide");
    }
    componentDidMount = async () => {
        let formData = await this.defaultFormData();
        await this.setState({ formData: { ...formData } });
        await this.registerValidatorMethod();
    }
    OtpverificationModal = async () => {
        this.ref_otpVerification.current._show();
    }
    OtpverificationModalforMobile = async () => {
        this.ref_MobVerification.current._show();
    }
    GetCaptcha = async () => {
        var $this = this;
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Home/CreateCaptcha",
                data: JSON.stringify(),
                success: function (data) {
                    $this.setState(Object.assign($this.state, { CaptchaMetaData: data.Captcha }));
                    $this.setState(Object.assign($this.state.formData, { CaptchaCode: data.MetaData }));
                    resolve(data);
                },
                error: function (result) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };
    CitizenRegistration = async () => {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/OtherServices/OtherServices/Registration",
                data: JSON.stringify(this.state.formData),
                success: function (data) {
                    if (data.Status != 200) {
                        reject(data)
                    }
                    resolve(data)
                },
                error: function (result) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };
    registerValidatorMethod = async () => {
        $.validator.addMethod("regexCustom", function (value, element, param) {
            if (this.optional(element)) {
                return true;
            }
            if (param instanceof RegExp) {
                return (new RegExp(param).test(value));
            }
            return true;
        }, "Invalid format.");
        $.validator.addMethod("isTrue", function (value, element, param) {
            if (this.optional(element)) {
                return true;
            }
            return param;
        }, "Invalid format.");
    }
    ShowSignature = async () => {
        var file = this.refs.file.files[0];
        var reader = new FileReader();
        var url = reader.readAsDataURL(file);

        reader.onloadend = function (e) {
            let _state = this.state.formData;
            _state.signatureData = [reader.result];
            this.setState({ formData: { ..._state } });
        }.bind(this);
    }

    validateForm = async () => {
        var validateObj = {
            rules: {},
            messages: {},
            errorPlacement: function (error, element) {
                error.insertAfter(element);
                error.css('color', 'red');
            }
        };
        validateObj.rules["form-txt-name"] = { required: true, maxlength: 50 };
        validateObj.rules["form-txt-email"] = { email: true, maxlength: 200 };
        validateObj.messages["form-txt-email"] = { email: "Valid email required" };

        validateObj.rules["form-txt-designation"] = { required: true, maxlength: 15 };
        validateObj.rules["form-txt-compamy"] = { required: true, maxlength: 200 };
        validateObj.rules["form-txt-mobile"] = { required: true, maxlength: 10, digits: true };
        validateObj.rules["form-txt-compamy-addr"] = { required: true, maxlength: 200 };
        validateObj.rules["form-txt-username"] = {
            required: true, maxlength: 15, minlength: 5,
            regexCustom: /^[a-z0-9._-]+$/
        };
        validateObj.messages["form-txt-username"] = { regexCustom: "Invalid format! Allowed any alpha-numeric word & ._- chars can be used" };
        validateObj.rules["form-txt-pass"] = {
            required: true, maxlength: 16, minlength: 8,
            regexCustom: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,16}$/g
        };
        validateObj.messages["form-txt-pass"] = { regexCustom: "Invalid format! password between 8 to 16 characters must contains at least one lowercase letter, one uppercase letter, one numeric digit, and one special character" };
        validateObj.rules["form-txt-conf-pass"] = {
            required: true, maxlength: 16, minlength: 8,
            isTrue: (a) => { return $(a).val() == $(this.ref_form.current).find("[name='form-txt-pass']").val(); }
        };
        validateObj.messages["form-txt-conf-pass"] = { isTrue: "Password & Confirm Password should match" };

        validateObj.rules["form-file-sig"] = {
            required: true,
            accept: "image/jpg,image/jpeg,image/png",
            isTrue: (a) => { return (!$(a).get(0).files[0] || $(a).get(0).files[0].size) <= 100 * 1024; }//in kb
        };
        validateObj.messages["form-file-sig"] = {
            isTrue: "File size must be with in 200KB",
            accept: "Supported extensions are .jpg,.jpeg,.png"
        };

        $(this.ref_form.current).validate(validateObj);
        return $(this.ref_form.current).valid();
    }
    render = () => {
        var { contextState, setContextState } = this.context;
        if (this.state.formData) {
            return (<React.Fragment>
                <div className="modal fade in" ref={this.ref_Modal} role="dialog" aria-hidden="false" noValidate="noValidate">
                    <div className="modal-dialog ui-draggable ui-draggable-handle">
                        <div className="modal-content ui-resizable">
                            <div className="modal-header well">
                                <button type="button" className="close" data-dismiss="modal">×</button>
                                <h4 className="modal-title">Citizen Login / Registration</h4>
                            </div>
                            <div className="modal-body">
                                <form className="form-horizontal" noValidate="noValidate" ref={this.ref_form}>
                                    <div className="messages"></div>
                                    <div className="controls">
                                        <div className="form-group row">
                                            <label htmlFor="form_name" className="col-sm-4 col-form-label">Type of Registration<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <label className="radio-inline">
                                                    <input type="radio" name="optradio" className="radiobtn"
                                                        onChange={async (e) => {
                                                            if (e.target.checked) {
                                                                let _state = this.state.formData;
                                                                _state.TypeOfRegistration = 1;
                                                                await this.setState({ formData: { ..._state } });
                                                            }
                                                        }}
                                                        checked={this.state.formData.TypeOfRegistration == 1}
                                                    />Individual
                                                </label>
                                                <label className="radio-inline">
                                                    <input type="radio" name="optradio" className="radiobtn"
                                                        onChange={async (e) => {
                                                            if (e.target.checked) {
                                                                let _state = this.state.formData;
                                                                _state.TypeOfRegistration = 2;
                                                                await this.setState({ formData: { ..._state } });
                                                            }
                                                        }}
                                                        checked={this.state.formData.TypeOfRegistration == 2}
                                                    />Commercial
                                                </label>

                                            </div>
                                        </div>

                                        <div className="form-group row">
                                            <label htmlFor="form-txt-name" className="col-sm-4 col-form-label">Name of Applicant<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <input type="text" name="form-txt-name" className="form-control" placeholder="Please enter your name."
                                                    required
                                                    onChange={async (e) => {
                                                        let data = e.target.value || "";
                                                        let _state = this.state.formData;
                                                        _state.Name = data;
                                                        await this.setState({ formData: { ..._state } });
                                                    }}
                                                    value={this.state.formData.Name}
                                                />

                                            </div>
                                        </div>
                                        <div className="form-group row">
                                            <label htmlFor="form-txt-email" className="col-sm-4 col-form-label">Email<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <input type="email" name="form-txt-email" className="form-control" placeholder="Please enter your email. "
                                                    required
                                                    onChange={async (e) => {
                                                        let data = e.target.value || "";
                                                        let _state = this.state.formData;
                                                        _state.Email = data;
                                                        await this.setState({ formData: { ..._state } });
                                                    }}
                                                    value={this.state.formData.Email}
                                                />

                                            </div>
                                        </div>
                                        <div className="form-group row">
                                            <label htmlFor="form-txt-mobile" className="col-sm-4 col-form-label">Mobile No(+91)<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <input type="tel" name="form-txt-mobile" pattern="^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[6789]\d{9}$" className="form-control nondecimal" placeholder="Please enter mobile no." required="required" data-error="Mobile no is required." maxLength="10"
                                                    required
                                                    onChange={async (e) => {
                                                        let data = e.target.value || "";
                                                        let _state = this.state.formData;
                                                        _state.MobileNo = data;
                                                        _state.UserName = data;
                                                        await this.setState({ formData: { ..._state } });
                                                    }}
                                                    value={this.state.formData.MobileNo}
                                                />

                                            </div>
                                        </div>
                                        <div className="form-group row">
                                            <label htmlFor="form-txt-compamy" className="col-sm-4 col-form-label companynm"><span >{this.state.formData.TypeOfRegistration == 2 ? 'Company Name' : 'Father/Husband Name'}</span><span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <input type="text" name="form-txt-compamy" className="form-control" placeholder={this.state.formData.TypeOfRegistration == 2 ? 'Enter Company Name' : 'Enter Father/Husband Name'}
                                                    required
                                                    onChange={async (e) => {
                                                        let data = e.target.value || "";
                                                        let _state = this.state.formData;
                                                        _state.CompanyName = data;
                                                        await this.setState({ formData: { ..._state } });
                                                    }}
                                                    value={this.state.formData.CompanyName}
                                                />

                                            </div>
                                        </div>
                                        <div className="form-group row" style={{ display: this.state.formData.TypeOfRegistration == 2 ? 'block' : 'none' }}>
                                            <label htmlFor="form-txt-designation" className="col-sm-4 col-form-label">Designation<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <input type="text" name="form-txt-designation" className="form-control reqremove" placeholder="Please enter designation. "
                                                    required={this.state.formData.TypeOfRegistration == 2}
                                                    onChange={async (e) => {
                                                        let data = e.target.value || "";
                                                        let _state = this.state.formData;
                                                        _state.Designation = data;
                                                        await this.setState({ formData: { ..._state } });
                                                    }}
                                                    value={this.state.formData.Designation}
                                                />

                                            </div>
                                        </div>
                                        <div className="form-group row">
                                            <label htmlFor="form-txt-compamy-addr" className="col-sm-4 col-form-label">Address<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <textarea name="form-txt-compamy-addr" className="form-control" placeholder="Please enter address." rows="4"
                                                    required
                                                    onChange={async (e) => {
                                                        let data = e.target.value || "";
                                                        let _state = this.state.formData;
                                                        _state.CompanyAddress = data;
                                                        await this.setState({ formData: { ..._state } });
                                                    }}
                                                    value={this.state.formData.CompanyAddress}
                                                ></textarea>

                                            </div>
                                        </div>

                                        <div className="form-group row">
                                            <label htmlFor="form-txt-username" className="col-sm-4 col-form-label">User Name<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <input type="text" name="form-txt-username" className="form-control" placeholder="Please enter your UserName."
                                                    disabled
                                                    required
                                                    value={this.state.formData.UserName}
                                                />

                                            </div>
                                        </div>
                                        <div className="form-group row">
                                            <label htmlFor="form-txt-pass" className="col-sm-4 col-form-label">Password<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <input type="password" name="form-txt-pass" className="form-control" placeholder="Please enter password" required="required"
                                                    required
                                                    onChange={async (e) => {
                                                        let data = e.target.value || "";
                                                        let _state = this.state.formData;
                                                        _state.Password = data;
                                                        await this.setState({ formData: { ..._state } });
                                                    }}
                                                    value={this.state.formData.Password}
                                                />
                                            </div>
                                        </div>

                                        <div className="form-group row">
                                            <label htmlFor="form-txt-conf-pass" className="col-sm-4 col-form-label">Confirm Password<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <input type="password" name="form-txt-conf-pass" className="form-control" placeholder="Please enter confirm password. " required="required"
                                                    required
                                                    maxLength="20"
                                                    minLength="8"
                                                    onChange={async (e) => {
                                                        let data = e.target.value || "";
                                                        let _state = this.state.formData;
                                                        _state.ConfirmPassword = data;
                                                        await this.setState({ formData: { ..._state } });
                                                    }}
                                                    value={this.state.formData.ConfirmPassword}
                                                />

                                            </div>
                                        </div>

                                        <div className="form-group row" style={{ display: this.state.formData.TypeOfRegistration == 2 ? 'block' : 'none' }}>
                                            <label htmlFor="form-file-sig" required className="col-sm-4 col-form-label"> Upload Signature<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <input type="file" ref="file" name="form-file-sig" className="form-control" accept="image/png, image/gif, image/jpeg"
                                                    onChange={async (e) => {
                                                        await this.ShowSignature();
                                                    }}
                                                />

                                            </div>
                                        </div>

                                        <div className="form-group row" style={{ display: this.state.formData.TypeOfRegistration == 2 ? 'block' : 'none' }}>
                                            <label htmlFor="preview_Img" className="col-sm-4 col-form-label"> Preview <span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8" style={{ width: "307px", height: "110px" }}>
                                                <img style={{ width: "307px", height: "110px" }} id="SignaturePhoto"
                                                    src={this.state.formData.signatureData}
                                                />
                                            </div>
                                        </div>

                                        <div className="form-group row">
                                            <label htmlFor="cpatchaTextBox" className="col-sm-4 col-form-label">Captcha<span style={{ color: "red" }}> *</span></label>
                                            <div className="col-sm-8">
                                                <div className="row">
                                                    <div className="col-sm-4">
                                                        <div>
                                                            <img src={`data:image/jpeg;base64,${this.state.CaptchaMetaData}`} style={{ height: "33px", width: "196px" }} />
                                                        </div>
                                                    </div>
                                                    <div className="col-md-2"></div>
                                                    <div className="col-sm-2">
                                                        <a><i style={{ marginTop: "7px", marginLeft: "19px" }} className="glyphicon glyphicon-refresh"
                                                            onClick={async () => {
                                                                this.GetCaptcha();
                                                            }}
                                                        ></i></a>
                                                    </div>
                                                </div>
                                                <br />

                                                <input type="text" autoComplete="off" name="form-txt-captcha" className="form-control" placeholder="Please enter captcha." data-error="Please Enter Captcha"
                                                    required
                                                    onChange={async (e) => {
                                                        let data = e.target.value || "";
                                                        let _state = this.state.formData;
                                                        _state.CaptchaText = data;
                                                        await this.setState({ formData: { ..._state } });
                                                    }}
                                                    value={this.state.formData.CaptchaText}
                                                />
                                                <div className="help-block with-errors error"></div>
                                            </div>
                                        </div>

                                        <div className="row">
                                            <div className="col-md-8"></div>
                                            <div className="col-md-1">
                                                <button type="button" className="btn btn-primary btn-Register" style={{ float: "right" }}
                                                    disabled={this.state.isSaving}
                                                    onClick={async () => {
                                                        try {
                                                            let resetData = await this.defaultFormData();
                                                            //return;
                                                            if (!(await this.validateForm())) {
                                                                return;
                                                            }
                                                            await this.setState({ ...this.state, isSaving: true, saveBtnText: "Please wait.." });
                                                            let data = await this.CitizenRegistration();
                                                            if (data.Data.Status == 1) {
                                                                await this._hide();
                                                                alertify.success(data.Data.Msg);
                                                                await this.setState({ ...resetData, MobileNo: data.Data.Mobile, msg: data.Data.Msg, Type: "R" });
                                                                await this.OtpverificationModal();
                                                            }
                                                            else {
                                                                await this._hide();
                                                                alertify.success(data.Data.Msg);
                                                            }
                                                        }
                                                        catch (e) {
                                                            await this.setState({ ...this.state, isSaving: false, saveBtnText: "Register" });
                                                            if (typeof (e) == "object") {
                                                                alertify.error(e.Message);
                                                                this.GetCaptcha();
                                                                this.setState({ ...this.state.formData, CaptchaText: "" });
                                                            }
                                                            else {
                                                                alertify.error("Unable to Register! Try again");
                                                                console.error(e);
                                                            }
                                                        }
                                                    }}
                                                >
                                                    {this.state.saveBtnText}</button>
                                            </div>
                                            <div className="col-md-3">
                                                <a href="#" className="btn-mverify" style={{ float: "left" }}
                                                    onClick={async () => {
                                                        await this._hide();
                                                        await this.OtpverificationModalforMobile();
                                                    }}
                                                >Verify Mobile No.</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div className="ui-resizable-handle ui-resizable-e" style={{ zIndex: "90" }}></div>
                            <div className="ui-resizable-handle ui-resizable-s" style={{ zIndex: "90" }}></div>
                            <div className="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style={{ zIndex: "90" }}>
                            </div>
                        </div>
                    </div>
                </div>
                <CitizenMobileVerficationComponent ref={this.ref_otpVerification} ButtonText={"Verify Mobile"} MobileNo={this.state.formData.MobileNo} OtpSendText={"Resend OTP"} Type={"R"} />
                <CitizenMobileVerficationComponent ref={this.ref_MobVerification} ButtonText={"Verify Mobile"} MobileNo={this.state.formData.MobileNo} MSG={this.state.formData.msg} OtpSendText={"Resend OTP"} Type={"V"} />
            </React.Fragment>);
        } else {
            return <h5 className="text-center">Please wait</h5>
        }
    }
}

class CitizenMobileVerficationComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            isSaving: false,
            forgetBtnText: "Procced for Forget Password",
            ResendOtpBtnText: "GET OTP",
            formData: {
                MobileNo: "",
                OTP: "",
                Type: ""
            },
            changePassToken: "",
            UserId: ""
        };
        this.ref_Modal = React.createRef();
        this.ref_CitizenConfirmPassword = React.createRef();
    }
    componentDidMount = async () => {
    }
    componentWillReceiveProps(nextProps) {
        // You don't have to do this check first, but it can help prevent an unneeded render
        if (nextProps.MobileNo !== this.state.formData.MobileNo) {
            var { formData } = this.state;
            formData.MobileNo = nextProps.MobileNo || "";
            this.setState({ formData: { ...formData } });
        }
    }
    ForgetPassModal = async () => {
        this.ref_CitizenConfirmPassword.current._show();
    }
    _show = async () => {
        $(this.ref_Modal.current).modal("show");
    }
    _hide = async () => {
        $(this.ref_Modal.current).modal("hide");
    }
    ResendOtpVerification = async () => {
        return new Promise((resolve, reject) => {
            var formdata = "{Type: '" + this.props.Type + "',MobileNo: '" + this.state.formData.MobileNo + "'} ";
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/OtherServices/OtherServices/ResendOtp",
                data: formdata,
                dataType: "json",
                success: function (data) {
                    if (data.Status != 200) {
                        alertify.error(data.Message);
                        reject(data)
                    }
                    resolve(data);
                },
                error: function (result) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };
    Otpverification = async () => {
        return new Promise((resolve, reject) => {
            var formdata = "{Otpdata: '" + this.state.formData.OTP + "', MobileNo: '" + this.state.formData.MobileNo + "'} ";
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/OtherServices/OtherServices/otpVerify",
                data: formdata,
                dataType: "json",
                success: function (data) {
                    if (data.Status != 200) {
                        alertify.error(data.Message);
                        reject(data)
                    }
                    resolve(data);
                },
                error: function (result) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };
    render = () => {
        var { contextState, setContextState } = this.context;
        return (<React.Fragment>
            <div className="modal fade in" ref={this.ref_Modal} role="dialog" aria-hidden="false" >
                <div className="modal-dialog ui-draggable ui-draggable-handle" >
                    <div className="modal-content ui-resizable">
                        <div className="modal-header well">
                            <button type="button" className="close" data-dismiss="modal">×</button>
                            <h4 className="modal-title">{this.props.Type == 'F' ? 'Forget Password' : 'Mobile No Verification'}</h4>
                        </div>
                        <div className="modal-body">
                            <form className="form-horizontal">
                                <div className="messages"></div>
                                <div className="controls">
                                    <div className="row" style={{ marginTop: "6px" }}>
                                        {this.props.Type == 'V' ? <label>{this.props.MSG}</label> : ''}
                                        <label htmlFor="form_mobile_forget" className="col-sm-4 col-form-label">Mobile No<span style={{ color: "red" }}> *</span></label>
                                        <div className="col-sm-6 form-group ">
                                            <input type="text" name="form_mobile_forget" disabled={this.props.Type == 'V'}
                                                pattern="^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[6789]\d{9}$" className="form-control form_mobile_forget nondecimal"
                                                placeholder="Please enter Mobile." maxLength="10"
                                                required
                                                onChange={async (e) => {
                                                    let data = e.target.value || "";
                                                    let _state = this.state.formData;
                                                    _state.MobileNo = data;
                                                    await this.setState({ formData: { ..._state } });
                                                }}
                                                value={this.state.formData.MobileNo}
                                            />
                                        </div>
                                        <div className="col-sm-2">
                                            <button type="button" className="btn btn-primary btn-GetOtpdata"
                                                disabled={this.state.isSaving}
                                                onClick={async () => {
                                                    try {
                                                        if (!(this.state.formData.MobileNo || "").trim()) {
                                                            return;
                                                        }
                                                        await this.setState({ ...this.state, isSaving: true, ResendOtpBtnText: "wait.." });
                                                        let data = await this.ResendOtpVerification();
                                                        if (data.Data.Status == 1) {
                                                            alertify.success(data.Data.Msg);
                                                            await this.setState({ ...this.state, isSaving: false, ResendOtpBtnText: this.props.OtpSendText })
                                                        }
                                                        else {
                                                            alertify.error(data.Data.Msg);
                                                            await this.setState({ ...this.state, isSaving: false, ResendOtpBtnText: this.props.OtpSendText })
                                                        }

                                                    } catch (e) {
                                                        await this.setState({ ...this.state, isSaving: false, ResendOtpBtnText: this.props.OtpSendText })
                                                        if (typeof (e) == "string")
                                                            alertify.error(e);
                                                        else {
                                                            alertify.error("Unable to Send OTP! Try again");
                                                            console.error(e);
                                                        }
                                                    }
                                                }}
                                            >
                                                {this.props.OtpSendText} </button>
                                        </div>
                                    </div>
                                    <div className="row" style={{ marginTop: "6px" }}>
                                        <label htmlFor="form_otp_ver_forget" className="col-sm-4 col-form-label mt-5">Enter OTP<span style={{ color: "red" }}> *</span></label>
                                        <div className="col-sm-8 mt-5 form-group ">
                                            <input type="text" name="otp" className="form-control form_otp_ver_forget nondecimal" placeholder="Please enter OTP."
                                                required
                                                onChange={async (e) => {
                                                    let data = e.target.value || "";
                                                    let _state = this.state.formData;
                                                    _state.OTP = data;
                                                    await this.setState({ formData: { ..._state } });
                                                }}
                                                value={this.state.formData.OTP}
                                            />
                                        </div>
                                    </div>
                                    <div className="row">
                                        <div className="col-sm-4" />
                                        <div className="col-sm-4 form-group">
                                            <button type="button" className="btn btn-primary btn-proceForgetpass"
                                                disabled={this.state.isSaving}
                                                onClick={async () => {
                                                    try {
                                                        if (!$(this.ref_Modal.current).find('form').valid()) {
                                                            return;
                                                        }
                                                        await this.setState({ ...this.state, isSaving: true, forgetBtnText: "Please wait.." });
                                                        let data = await this.Otpverification();
                                                        if (data.Data.Status == 1) {
                                                            await this._hide();
                                                            alertify.success(data.Data.Msg);
                                                            this.setState({ ...this.state.formData, MobileNo: data.Data.Mobile });
                                                            this.setState({ ...this.state, UserId: data.Data.UserID });
                                                            if (this.props.Type != "R") {
                                                                this.ForgetPassModal()
                                                            }
                                                        }
                                                        else {
                                                            alertify.error(data.Data.Msg);
                                                            await this.setState({ ...this.state, isSaving: false, forgetBtnText: this.props.ButtonText });
                                                        }
                                                    } catch (e) {
                                                        await this.setState({ ...this.state, isSaving: false, forgetBtnText: this.props.ButtonText });
                                                        if (typeof (e) == "string")
                                                            alertify.error(e);
                                                        else {
                                                            alertify.error("Unable to Proccess.. ! Try again");
                                                            console.error(e);
                                                        }
                                                    }
                                                }}
                                            >
                                                {this.props.ButtonText}  </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div className="ui-resizable-handle ui-resizable-e" style={{ zIndex: "90" }}></div><div className="ui-resizable-handle ui-resizable-s" style={{ zIndex: "90" }}></div><div className="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style={{ zIndex: "90" }}></div></div>
                </div>
            </div>
            <CitizenConfirmPassComponent ref={this.ref_CitizenConfirmPassword} MobileNo={this.state.formData.MobileNo} UserId={this.state.UserId} />
        </React.Fragment>);

    }
}

class CitizenConfirmPassComponent extends React.Component {
    static contextType = ___HomeContext;
    constructor(props) {
        super(props);
        this.state = {
            isSaving: false,
            forgetBtnText: "Change Password",
            formData:
            {
                Password: "",
                confPassWord: "",
                Mobile: "",
                UserId: ""
            }
        };
        this.ref_Modal = React.createRef();
    }
    _resetState = async () => {
        this.setState(initialState);
    }
    _show = async () => {
        $(this.ref_Modal.current).modal("show");
    }
    _hide = async () => {
        $(this.ref_Modal.current).modal("hide");
    }
    componentDidMount = async () => {
    }
    Changepassword = async () => {
        return new Promise((resolve, reject) => {
            var formdata = "{Password: '" + this.state.formData.Password + "', confPassWord: '" + this.state.formData.confPassWord + "', MobileNo: '" + this.props.MobileNo + "', userId: '" + this.props.UserId + "'} ";
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/OtherServices/OtherServices/ForgetPassword",
                data: formdata,
                dataType: "json",
                success: function (data) {
                    if (data.Status != 200) {
                        alertify.error(data.Message);
                        reject(data)
                    }
                    resolve(data);
                },
                error: function (result) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };
    render = () => {
        var { contextState, setContextState } = this.context;
        return (<React.Fragment>
            <div className="modal fade in" role="dialog" ref={this.ref_Modal} aria-hidden="false" >
                <div className="modal-dialog ui-draggable ui-draggable-handle">
                    <div className="modal-content ui-resizable">
                        <div className="modal-header well">
                            <button type="button" className="close" data-dismiss="modal">×</button>
                            <h4 className="modal-title">New Password</h4>
                        </div>
                        <div className="modal-body">
                            <form className="form-horizontal">
                                <div className="messages"></div>
                                <div className="controls">
                                    <center> <div style={{ fontWeight: "bold", marginTop: "-27px" }}></div></center>
                                    <div className="form-group row" style={{ marginTop: "6px" }}>

                                        <label htmlFor="form_forget_pass" className="col-sm-4 col-form-label">New Password<span style={{ color: "red" }}> *</span></label>
                                        <div className="col-sm-8">
                                            <input type="password" name="form_forget_pass" className="form-control form_forget_pass" placeholder="Please Enter the Password." data-error="Password No is required."
                                                onChange={async (e) => {
                                                    let data = e.target.value || "";
                                                    let _state = this.state.formData;
                                                    _state.Password = data;
                                                    await this.setState({ formData: { ..._state } });
                                                }}
                                                value={this.state.formData.Password}
                                            />

                                        </div>
                                        <label htmlFor="form_confirm_pass" className="col-sm-4 col-form-label">Confirm Password<span style={{ color: "red" }}> *</span></label>
                                        <div className="col-sm-8">
                                            <input type="password" name="form_confirm_pass" className="form-control form_confirm_pass" placeholder="Please enter the Confirm Password." data-error="Password No is required."
                                                onChange={async (e) => {
                                                    let data = e.target.value || "";
                                                    let _state = this.state.formData;
                                                    _state.confPassWord = data;
                                                    await this.setState({ formData: { ..._state } });
                                                }}
                                                value={this.state.formData.confPassWord}
                                            />
                                            <div className="help-block with-errors err"></div>
                                        </div>
                                    </div>
                                    <div className="row">
                                        <div className="col-lg-4"></div>
                                        <div className="col-lg-4">
                                            <button type="button" className="btn btn-primary btn-chngforpass"
                                                disabled={this.state.isSaving}
                                                onClick={async () => {
                                                    try {
                                                        //if (!$(this.ref_Modal.current).valid()) {
                                                        //    return;
                                                        //}
                                                        await this.setState({ ...this.state, isSaving: true, forgetBtnText: "Please wait.." });
                                                        let data = await this.Changepassword();
                                                        if (data.Data.Status == 1) {
                                                            await this._hide();
                                                            alertify.success(data.Data.Msg);
                                                            this._resetState();
                                                        }
                                                        else {
                                                            alertify.error(data.Data.Msg);
                                                            this._resetState();
                                                        }
                                                    } catch (e) {
                                                        await this.setState({ ...this.state, isSaving: false, forgetBtnText: "Change Password" });
                                                        this._resetState();
                                                        if (typeof (e) == "string")
                                                            alertify.error(e);
                                                        else {
                                                            alertify.error("Unable to Proccess.. ! Try again");
                                                            console.error(e);
                                                        }
                                                    }
                                                }}
                                            >
                                                {this.state.forgetBtnText}  </button>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div className="ui-resizable-handle ui-resizable-e" style={{ zIndex: "90" }}></div><div className="ui-resizable-handle ui-resizable-s" style={{ zIndex: "90" }}></div><div className="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style={{ zIndex: "90" }}></div></div>
                </div>
            </div>
        </React.Fragment>);

    }
}

class ThirdPartyVerification extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            applicationDetails:
            {
                ApplicationNo: ''

            },
            ApplicationDetailsModal: {
                visible: false,
                message: '',
                data: null
            },
            ApplicationResultDetails: {
                CertNo: '',
                ServcesName: '',
                whomissued: '',
                Address: '',
                Status: '',
                ApprovalDate: '',
                ValidDate: ''
            }
        };
        this.ref_Modal = React.createRef();
        this.ref_ThirdPartyVerification = React.createRef();
    }
    componentDidMount = async () => {
    }
    _show = async () => {
        $(this.ref_Modal.current).modal("show");
    }
    _hide = async () => {
        $(this.ref_Modal.current).modal("hide");
    }
    //CheckThirdPartyApplicationNo = async () => {
    //    var { applicationDetails } = this.state;
    //    if (applicationDetails.ApplicationNo == '') {
    //        alertify.error("Application No could't be empty !");
    //        return false;
    //    }
    //    alertify.error("Under Maintainance ! Please wait for the update this service !");
    //    return false;
    //}
    CheckThirdPartyApplicationNo = async () => {
        var { applicationDetails, ApplicationDetailsModal, ApplicationResultDetails } = this.state;
        const regex = /^[A-Z]{4}\/\d{2}-\d{2}\/MU\/\d{6}$/;
        if (applicationDetails.ApplicationNo == undefined) {
            alertify.error("Application No could't be empty !");
            return false;
        }
        else if (regex.test(applicationDetails.ApplicationNo)) {
            try {
                var data = await this.getApplicationDetailsPost({
                    applicationNo: applicationDetails.ApplicationNo
                });
                if (data.Data != null) {
                    //this.setState({ ApplicationResultDetails: data.Data });
                    ApplicationDetailsModal = { visible: true }
                    await this.setState({ ApplicationDetailsModal: ApplicationDetailsModal, ApplicationResultDetails: data.Data });
                }
                else
                    this.setState({ ApplicationResultDetails: [] });
            }
            catch (e) {
                alert('Error: ' + e.message);
                return false;
            }
        } else {
            alertify.error("Application No Wrong Format !");
            return false;
        }

    }
    getApplicationDetailsTable = () => {
        var { ApplicationResultDetails, ApplicationDetailsModal } = this.state;
        var final = {}; var master = []; var detail = [];
        var ReportNames = "", FileNames = '';
        if (!(ApplicationResultDetails || []).length)
            return <tr><td colSpan={7} className="text-center" style={{ color: "red" }}>no records found !</td></tr>
        else
            return (ApplicationResultDetails || []).map((t, i) => {
                return <tr key={i}>
                    <td className="text-center">{t.ApplicationNo}</td>
                    <td className="text-center">{t.MutationTypeEnglish}</td>
                    <td className="text-center">{t.Name_issued}</td>
                    <td className="text-center">{t.Address_issued}</td>
                    <td className="text-center">{t.STATUS}</td>
                    <td className="text-center">{t.ApprovalDate}</td>
                    <td className="text-center">{t.Validtill}</td>
                    {t.STATUS == "APPROVED" ?
                        <td className="text-center">
                            <button type="button" className="btn btn-success"
                                onClick={async () => {
                                    await this.PrintCertificate({ t });
                                }}
                            >Print Certificate</button>
                            {/*<button type="button" className="btn btn-warning"*/}
                            {/*    onClick={async () => {*/}
                            {/*        await this.PrintAcknoledgement({ t });*/}
                            {/*    }}*/}
                            {/*>Print Acknoledgement</button>*/}
                        </td> : <td className="text-center">Not Approved</td>
                        //: <td className="text-center">
                        //    <button type="button" className="btn btn-warning"
                        //        onClick={async () => {
                        //            await this.PrintAcknoledgement({ t });
                        //        }}
                        //    >Print Acknoledgement</button>
                        //</td>
                    }
                </tr>
            })
    }
    PrintAcknoledgement = async (Data) => {
        var data = Data.t;
        var reportPayload = {
            Master: [{
                ReportName: "MutationAcknow.rpt",
                FileName: "Acknowledgement-Report",
                Database: ''
            }],
            Detail: [{
                ServMstId: data.ServMstId
            }]
        }
        var left = ($(window).width() / 2) - (950 / 2),
            top = ($(window).height() / 2) - (650 / 2),
            popup = window.open("/OpenReport/OpenReport.aspx?ReportName=" + JSON.stringify(reportPayload), "popup", "width=950, height=650, top=" + top + ", left=" + left);
        popup.focus();
    }
    PrintCertificate = async (Data) => {
        var data = Data.t;
        var ReportNames = "", FileNames = '';
        var final = {}; var master = []; var detail = [];
        if (data.ValTag == "A") {
            ReportNames = "MutationCertificate_Amalgamation.rpt";
            FileNames = "MutationCertificate_Amalgamation";
            detail.push({
                ServMstId: data.ServMstId
            });
        }
        else {
            ReportNames = "MutationCertificate.rpt";
            FileNames = "MutationCertificate";
            detail.push({
                ServMstId: data.ServMstId
            });
        }
        master.push({
            ReportName: ReportNames,
            FileName: FileNames,
            Database: ''
        });
        final = {
            Master: master,
            Detail: detail
        }
        var left = ($(window).width() / 2) - (950 / 2),
            top = ($(window).height() / 2) - (650 / 2),
            popup = window.open("/OtherServices/OtherServices/AssessmentMutationReport?ReportName=" + JSON.stringify(final), "popup", "width=950, height=650, top=" + top + ", left=" + left);
        popup.focus();
    }
    getApplicationDetailsPost = async (applicationNo) => {
        return new Promise((resolve, reject) => {
            var formdata = "{applicationNo: '" + this.state.applicationDetails.ApplicationNo + "'} ";
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/OtherServices/OtherServices/getApplicationDetails",
                data: formdata,
                dataType: "json",
                success: function (data) {
                    let Result = JSON.parse(data);
                    if (Result.Status != 200) {
                        alertify.error(Result.Message);
                        reject(Result)
                    }
                    resolve(Result);
                },
                error: function (result) {
                    reject(window.ajaxError(r, a, b));
                }
            });
        })
    };
    render = () => {
        var { applicationDetails, ApplicationDetailsModal, ApplicationResultDetails } = this.state;
        return (<React.Fragment>
            <div className="modal fade in" ref={this.ref_Modal} role="dialog" aria-hidden="false" >
                <div className="modal-dialog ui-draggable ui-draggable-handle">
                    <div className="modal-content ui-resizable">
                        <div className="modal-header well">
                            <button type="button" className="close" data-dismiss="modal">×</button>
                            <h4 className="modal-title">Check Permission</h4>
                        </div>
                        <div className="modal-body">
                            <div className="row">
                                <div className="col-md-4">
                                    <label htmlFor="">Application No <span style={{ color: "red" }}> *</span></label>
                                </div>
                                <div className="col-md-8">
                                    <input type="text" className="form-control" placeholder="Application No"
                                        value={applicationDetails.ApplicationNo}
                                        onChange={async (e) => {
                                            let data = e.target.value || "";
                                            let _applicationDetails = applicationDetails;
                                            _applicationDetails.ApplicationNo = data;
                                            await this.setState({ applicationDetails: { ..._applicationDetails } });
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row" style={{ textAlign: "center", marginTop: "17px" }}>
                                <button className="btn btn-primary" type="button"
                                    onClick={async (e) => {
                                        await this.CheckThirdPartyApplicationNo();
                                        //await this.getAddinationalDocAsync({ applicationId: t.ApplicationId });
                                        //ApplicationDetailsModal = { visible: true }
                                        //await this.setState({ ApplicationDetailsModal: ApplicationDetailsModal });
                                    }}
                                >Check</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {ApplicationDetailsModal.visible ?
                <Modal
                    hasHeader={true}
                    title={'Application Details'}
                    position={'center'}
                    handleHideModal={async () => {
                        ApplicationDetailsModal.visible = false;
                        await this.setState({ ApplicationDetailsModal: { ...ApplicationDetailsModal } });
                    }}
                >
                    <table className="table table-bordered">
                        <thead className="bordered-blueberry">
                            <tr>
                                <th style={{ textAlign: "center" }}>Approval Certificate number / Application number</th>
                                <th style={{ textAlign: "center" }}>Service Name</th>
                                <th style={{ textAlign: "center" }}>Name of Enterprise to whom issued</th>
                                <th style={{ textAlign: "center" }}>Address of enterprise to whom issued</th>
                                <th style={{ textAlign: "center" }}>Status</th>
                                <th style={{ textAlign: "center" }}>Date of Approval</th>
                                <th style={{ textAlign: "center" }}>Valid till (Date)</th>
                                <th style={{ textAlign: "center" }}>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.getApplicationDetailsTable()}
                        </tbody>
                    </table>
                </Modal> : <React.Fragment />}
        </React.Fragment>);
    }
}


class ChatPopup extends React.Component {
    constructor(props) {
        super(props);
        this.chatBodyRef = React.createRef();
        this.state = {
            isOpen: false,
            chatInput: "",
            messages: [],
            isLoading: false
        };
    }

    toggleChat = () => {
        this.setState({ isOpen: !this.state.isOpen });
    };
    componentDidMount() {
        this.setState({
            messages: [
                { sender: "bot", text: "How may I assist you today?" }
            ]
        });
    }
    componentDidUpdate(prevProps, prevState) {
        if (prevState.messages !== this.state.messages) {

            // 👉 If user is near bottom → auto scroll
            if (this.isUserNearBottom()) {
                this.scrollToBottom();
            }
        }
    }
    isUserNearBottom = () => {
        const el = this.chatBodyRef.current;
        if (!el) return true;

        const threshold = 80; // px tolerance
        return (el.scrollHeight - el.scrollTop - el.clientHeight) < threshold;
    };

    scrollToBottom = () => {
        const el = this.chatBodyRef.current;
        if (el) {
            el.scrollTo({
                top: el.scrollHeight,
                behavior: "smooth"
            });
        }
    };
    sendMessage = async () => {
        const { chatInput, messages } = this.state;
        if (!chatInput.trim()) return;

        const userMsg = { sender: "user", text: chatInput };

        this.setState({
            messages: messages.concat(userMsg),
            chatInput: "",
            isLoading: true
        }, () => {
                this.scrollToBottom(); // 🔥 always scroll on send
            });

        try {
            const token = "17e7a685590c4d9797e225a66f06c734";

            const response = await fetch(
                "https://eunexchat-dev.azurewebsites.net/post_question/",
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "x-hash": "0",
                        "Authorization": "Bearer " + token
                    },
                    body: JSON.stringify({
                        Question: chatInput,
                        Lang: "EN",
                        UserName: "admin@admin.com",
                        UserSex: "",
                        AppName: "MCHAT",
                        Category: "",
                        SubCategory: "",
                        UniqueID: "9831254840",
                        UserDetails: ".Super Admin LNU",
                        disclaimerlist: [
                            "For urgent matters, contact the office directly."
                        ],
                        systempromptlist: [
                            "You are a Municipality Chat BOT."
                        ],
                        rules: [
                            "Use simple language."
                        ]
                    })
                }
            );

            const data = await response.json();

            const botMsg = {
                sender: "bot",
                text: data.data.Answer
            };

            this.setState({
                messages: this.state.messages.concat(botMsg),
                isLoading: false
            });

        } catch (e) {
            this.setState({
                messages: this.state.messages.concat({
                    sender: "bot",
                    text: "Server error"
                }),
                isLoading: false
            });
        }
    };

    renderMessages = () => {
        return (this.state.messages || []).map((msg, i) => (
            <div key={i} className={"msg " + msg.sender}>
                {msg.text}
            </div>
        ));
    };

    render() {
        const { isOpen, chatInput, isLoading } = this.state;

        return (
            <div>

                {/* Floating Button */}
                <div className="chat-toggle-btn" onClick={this.toggleChat}>
                    💬
                </div>

                {/* Chat Window */}
                {isOpen && (
                    <div className="chat-popup">

                        <div className="chat-header">
                            Municipality Assistant (Sahayak)
                            <span onClick={this.toggleChat} className="close-btn">×</span>
                        </div>

                        <div className="chat-body" ref={this.chatBodyRef}>
                            {this.renderMessages()}

                            {this.state.isLoading && (
                                <div className="msg bot typing">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            )}
                        </div>

                        <div className="chat-footer">
                            <input
                                type="text"
                                value={chatInput}
                                placeholder="Type..."
                                onChange={(e) => this.setState({ chatInput: e.target.value })}
                                onKeyDown={(e) => {
                                    if (e.key === "Enter") this.sendMessage();
                                }}
                            />
                            <button className="send-btn" onClick={this.sendMessage}>
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    width="18"
                                    height="18"
                                    fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z" />
                                </svg>
                            </button>
                        </div>

                    </div>
                )}

            </div>
        );
    }
}




class MunicipalityChatBot extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            chatInput: "",
            messages: [],
            isLoading: false
        };
    }

    componentDidMount = async () => { }

    sendMessage = async () => {
        const { chatInput, messages } = this.state;

        if (!chatInput.trim()) return;

        const userMsg = { sender: "user", text: chatInput };

        this.setState({
            messages: [...messages, userMsg],
            chatInput: "",
            isLoading: true
        });

        try {
            const token = "17e7a685590c4d9797e225a66f06c734";
            const response = await fetch(
                "https://eunexchat-dev.azurewebsites.net/post_question/",
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "x-hash": "0",
                        "Authorization": "Bearer " + token
                    },
                    body: JSON.stringify({
                        Question: chatInput,
                        Lang: "EN",
                        UserName: "admin@admin.com",
                        UserSex: "",
                        AppName: "MCHAT",
                        Category: "",
                        SubCategory: "",
                        UniqueID: "9831254840",
                        UserDetails: ".Super Admin LNU",
                        disclaimerlist: [
                            "For urgent matters, contact the office directly.",
                            "Please verify all information from official sources.",
                            "This is an AI-generated response and may contain inaccuracies."
                        ],
                        systempromptlist: [
                            "You are a Municipality Chat BOT, assistant for Municipal services.",
                            "You provide clear and accurate information."
                        ],
                        rules: [
                            "Do not check Internet for Answer.",
                            "Provide step-by-step guidance.",
                            "Suggest checking FAQ for general queries.",
                            "Use simple language."
                        ]
                    })
                }
            );

            const data = await response.json();

            const botMsg = {
                sender: "bot",
                text: data.data.Answer
            };

            this.setState({
                messages: [...this.state.messages, botMsg],
                isLoading: false
            });

        } catch (e) {
            this.setState({
                messages: [...this.state.messages, { sender: "bot", text: "Server error" }],
                isLoading: false
            });
        }
    };

    renderMessages = () => {
        const { messages } = this.state;

        if (!(messages || []).length) {
            return <div className="text-center text-muted">Start conversation...</div>;
        }

        return messages.map((msg, i) => (
            <div key={i} className={`chat-msg ${msg.sender}`}>
                {msg.text}
            </div>
        ));
    };

    render() {
        const { chatInput, isLoading } = this.state;

        return (
            <div className="chat-container">

                <div className="chat-header">
                    Municipality ChatBot
                </div>

                <div className="chat-body">
                    {this.renderMessages()}
                    {isLoading && <div className="chat-msg bot">Typing...</div>}
                </div>

                <div className="chat-footer">
                    <input
                        type="text"
                        className="form-control"
                        placeholder="Type your question..."
                        value={chatInput}
                        onChange={(e) => this.setState({ chatInput: e.target.value })}
                        onKeyDown={(e) => {
                            if (e.key === "Enter") this.sendMessage();
                        }}
                    />

                    <button
                        className="btn btn-primary"
                        onClick={this.sendMessage}
                    >
                        Send
                    </button>
                </div>

            </div>
        );
    }
}