import React from "react";
import Head from 'next/head';
import Image from 'next/image';
import Link from "next/link";
import cookie from 'cookie';
import numeral from "numeral";
import pluralize from 'pluralize-ru';
import { SpinnerCircular } from 'spinners-react';
import Select from 'react-select';
import { connect } from "react-redux";
import { withRouter } from 'next/router';
import debounce from 'debounce-promise';
import { get as _get } from 'lodash';

import QuestionnaireForm from "../QuestionnaireForm";
import CalendarDatePicker from '../../../CalendarDatePicker';
import FilesList from "../FilesList";
import Modal from "../../../../pages/components/Modal/modal";
import countries from "../../../../lib/countries.json";
import citizenships from "../../../../lib/citizenships.json";
import doctypes_personal from "../../../../lib/doctypes_personal.json";
import doctypes_corporate from "../../../../lib/doctypes_corporate.json";
import { reduxWrapper } from '../../../../store';
import moment from "moment";
import AddressSuggests from "../../AddressSuggests";
import InputMask from 'react-input-mask';
import SuggestsInput from "../../SuggestsInput";
import { getCitizenshipTitleByCode } from "../../../../utils/citizenship";
import { removeAttachmentFiles, saveQuestionnaire, getSuggests, checkDocumentData } from "../../../../actions";
import DocumentIssuerSuggestsInput from "../../DocumentIssuerSuggestsInput";
import FormMessage from "../FormMessage";

const is_valid_inn = (i) => 
{
	if ( i.match(/\D/) ) return false;

	var inn = i.match(/(\d)/g);

	if ( inn.length == 10 )
	{
		return inn[9] == String(((
					2*inn[0] + 4*inn[1] + 10*inn[2] +
					3*inn[3] + 5*inn[4] +  9*inn[5] +
					4*inn[6] + 6*inn[7] +  8*inn[8]
				) % 11) % 10);
	}
	else if ( inn.length == 12 )
	{
		return inn[10] == String(((
					7*inn[0] + 2*inn[1] + 4*inn[2] +
					10*inn[3] + 3*inn[4] + 5*inn[5] +
					9*inn[6] + 4*inn[7] + 6*inn[8] +
					8*inn[9]
				) % 11) % 10) && inn[11] == String(((
					3*inn[0] +  7*inn[1] + 2*inn[2] +
					4*inn[3] + 10*inn[4] + 3*inn[5] +
					5*inn[6] +  9*inn[7] + 4*inn[8] +
					6*inn[9] +  8*inn[10]
				) % 11) % 10);
	}

	return false;
}

const suggestsInnDebounce = (query) =>
{
	return getSuggests("inn", { query });
}

const suggestsInn = debounce(suggestsInnDebounce, 200);

const signer_template = {
	not_head_person: true, 
	lastname: "", 
	firstname: "", 
	middlename: "", 
	no_middle_name: false, 
	jobtitle: "", 
	signer_rule_basic: "", 
	signer_rule_basic_add: "", 
	docdate: "", 
	docnumber: "", 
	delegation_agreement: false, 
	telephone: "", 
	email: "", 
};

const identity_document_template = {
	doctype: "", 
	seria: "", 
	docnumber: "", 
	issuedate: "", 
	code: "", 
	issueby: "", 
	issueby_search_dadata: "", 
	placebirth: "", 
	citizenship: {
		title: "", 
		code: "", 
	}, 
	registration_address: {
		name: "", 
		fias_id: "", 
	}
};


class Form_3_Signer extends QuestionnaireForm
{
	constructor(props)
	{
		super(props);
		this.state = {
			main: {
				title: null, 
				inn: null, 
				kpp: null, 
				email: null, 
				telephone: null, 
				websiteurl: null, 
				financial_loan: null, 
				is_individual_executive: false, 
				individual_executive_inn: "", 
				individual_executive_kpp: "", 
				individual_executive_oop: "", 
				individual_executive_docnum: "", 
				individual_executive_docdate: "", 
				high_level: "", 
				board_of_directors: "", 
				collective_executive: "", 
				individual_executive: "", 
				other_control: "", 
			}, 
			head_person: {
				lastname: "", 
				firstname: "", 
				middlename: "", 
				no_middle_name: false, 
				jobtitle: "Генеральный директор", 
				telephone: "", 
				email: "", 
				identity_document: {
					doctype: "", 
					seria: "", 
					docnumber: "", 
					issuedate: "", 
					code: "", 
					issueby: "", 
					issueby_search_dadata: "", 
					placebirth: "", 
					citizenship: {
						title: "", 
						code: "", 
					}, 
					registration_address: {
						name: "", 
						fias_id: "", 
					}
				}, 
				assignment_date: "", 
				credentials_dateend: "", 
				indefinite: false, 
			}, 
			signatory_person: {
				not_head_person: false, 
				lastname: "", 
				firstname: "", 
				middlename: "", 
				no_middle_name: false, 
				jobtitle: "", 
				signer_rule_basic: "", 
				signer_rule_basic_add: "", 
				docdate: "", 
				docnumber: "", 
				delegation_agreement: false, 
				telephone: "", 
				email: "", 
				identity_document: {
					doctype: "", 
					seria: "", 
					docnumber: "", 
					issuedate: "", 
					code: "", 
					issueby: "", 
					issueby_search_dadata: "", 
					placebirth: "", 
					citizenship: {
						title: "", 
						code: "", 
					}, 
					registration_address: {
						name: "", 
						fias_id: "", 
					}
				}
			}, 
			delegation_files: [], 
			head_person_files: [], 
			signatory_person_files: [], 
			signatory_corporate_files: [], 
			loading: false, 
			modal_show_personal_data: false, 
			status: "empty", 
			errors: [], 
			signer_from_list: true, 
			client_contacts: [], 
		};

		this.ref_form = React.createRef();
		this.ref_submit = React.createRef();
	}

	static getDerivedStateFromProps(nextProps, prevState)
	{
		return {
			main: nextProps.questionnaire.main, 
			head_person: nextProps.questionnaire.head_person, 
			head_person_files: nextProps.questionnaire.head_person_files, 
			delegation_files: nextProps.questionnaire.delegation_files, 
			signatory_person: nextProps.questionnaire.signatory_person, 
			signatory_person_files: nextProps.questionnaire.signatory_person_files, 
			signatory_corporate_files: nextProps.questionnaire.signatory_corporate_files, 
			status: nextProps.questionnaire.status, 
			client_contacts: nextProps.questionnaire.client_contacts, 
		};
	}

	componentDidMount()
	{
		const { main, signatory_person } = this.state;
		if( main.inn !== null && main.inn.length === 12)
		{
			this._handle_onCheckboxFieldChange("head_person.indefinite", true);
		}

		if(signatory_person.lastname !== null || signatory_person.lastname !== undefined || signatory_person.lastname !== "")
		{
			this.setState({ signer_from_list: false });
		}
	}

	_handle_onCitizenshipChange = (name, value) => 
	{
		let citizenship = getCitizenshipTitleByCode(value);

		this._handle_onFieldChange(name, {
			title: citizenship, 
			code: value, 
		});
	}

	_handle_onIssuerCodeChange = (branch, option) => 
	{
		this._removeError(`${ branch }.identity_document.code`); 

		if(typeof option === "string")
		{
			this._handle_onTextFieldChange(`${ branch }.identity_document.code`, option);
		}
		else
		{
			this._handle_onBranchChange([ 
				{ name: `${ branch }.identity_document.code`, value: option.data.code }, 
				{ name: `${ branch }.identity_document.issueby`, value: option.value }, 
			]);
			this._removeError(`${ branch }.identity_document.issueby`);
		}
	}

	_handle_onIssuerChange = (branch, option) => 
	{
		this._removeError(`${ branch }.identity_document.issueby`); 

		if(typeof option === "string")
		{
			this._handle_onTextFieldChange(`${ branch }.identity_document.issueby`, option);
		}
		else
		{
			this._handle_onBranchChange([ 
				{ name: `${ branch }.identity_document.code`, value: option.data.code }, 
				{ name: `${ branch }.identity_document.issueby`, value: option.value }, 
			]);
			this._removeError(`${ branch }.identity_document.code`);
		}
	}

	_handle_onIndefiniteChange = () => 
	{
		const { head_person } = this.state;
		const indefinite = !head_person.indefinite ? true : false;
		this._handle_onCheckboxFieldChange("head_person.indefinite", indefinite);
		this._removeError("head_person.credentials_dateend");

		if(!indefinite)
		{
			setTimeout(() => 
			{
				this._handle_onCheckboxFieldChange("head_person.credentials_dateend", "");
			}, 10);
		}
	}

	_handle_onChangeDelegationAgreement = () => 
	{
		const { signatory_person, delegation_files } = this.state;

		if(!signatory_person.delegation_agreement)
		{
			this._handle_onCheckboxFieldChange("signatory_person.delegation_agreement", true);
		}
		else
		{
			removeAttachmentFiles(delegation_files);

			this._handle_onBranchChange([
				{ name: "signatory_person.delegation_agreement", value: false, }, 
				{ name: "main.individual_executive_inn", value: "", }, 
				{ name: "main.individual_executive_kpp", value: "", }, 
				{ name: "main.individual_executive_oop", value: "", }, 
				{ name: "main.individual_executive_docnum", value: "", }, 
				{ name: "main.individual_executive_docdate", value: "", }, 
				{ name: "delegation_files", value: [], }, 
			]);
		}
	}

	_handle_onInnChange = (inn) => 
	{
		this._handle_onTextFieldChange("main.individual_executive_inn", inn);

		suggestsInn(inn.replace(/[^\d]+/g, ''))
		.then((result) => 
		{
			if(result?.suggestions.length > 0)
			{
				if(inn.replace(/[^\d]+/g, '').length > 10)
				{
					this._handle_onTextFieldChange("main.individual_executive_oop", result?.suggestions[0]?.data?.name?.full_with_opf);
				}
				else
				{
					this._handle_onBranchChange([ {
						name: "main.individual_executive_oop", 
						value: result?.suggestions[0]?.data?.name?.full_with_opf, 
					}, {
						name: "main.individual_executive_kpp", 
						value: result?.suggestions[0]?.data?.kpp, 
					}]);
				}
			}
		})
		.catch(() => 
		{

		});
	}

	_handle_onDocumentTypeChange = (branch, element) => 
	{
		this._handle_onBranchChange([ 
			{ name: `${ branch }.identity_document.doctype`, value: element.value }, 
			{ name: `${ branch }.identity_document.citizenship_code`, value: parseInt(element.value, 10) === 100000000 ? 643 : null }, 
		]);
	}

	_handle_onSignerFromListSelect = (contact) => 
	{
		console.log(contact);

		const signer = { ...JSON.parse(JSON.stringify(signer_template)), ...contact };
		if(signer.identity_document === undefined || signer.identity_document === null)
		{
			signer.identity_document = JSON.parse(JSON.stringify(identity_document_template));
		}

		this._handle_onBranchChange([
			{ name: "signatory_person", value: signer }, 
			{ name: "signatory_person_files", value: [] }, 
			{ name: "signatory_corporate_files", value: [] }, 
		]);

		this.setState({ signer_from_list: false }, () => 
		{
		});
	}

	_handle_onNextPage = (event) => 
	{
		event.preventDefault();
		this.setState({ loading: true }, async () => 
		{
			const errors = [];
			const { main, head_person, signatory_person, 
				delegation_files, head_person_files, signatory_person_files, signatory_corporate_files, 
			} = this.state;

			const head_person_check = [
				"lastname", 
				"firstname", 
				"jobtitle", 
				"email", 
				"identity_document.seria", 
				"identity_document.docnumber", 
				"identity_document.issuedate", 
				"identity_document.placebirth", 
				"identity_document.citizenship_code", 
				"identity_document.registration_address.name", 
				"assignment_date", 
			];

			if(parseInt(_get(head_person, "identity_document.doctype"), 10) === 100000000)
			{
				head_person_check.push("identity_document.code");
				head_person_check.push("identity_document.issueby");
			}

			for(let i in head_person_check)
			{
				const v = _get(head_person, head_person_check[i]);

				if(v === "" || v === null)
				{
					errors.push(`head_person.${ head_person_check[i] }`);
				}
			}

			if(head_person.assignment_date !== undefined && head_person.assignment_date !== null && head_person.assignment_date !== "")
			{
				try
				{
					const date = moment(head_person.assignment_date);
					const today = moment();

					if(date > today)
					{
						errors.push(`head_person.assignment_date`);
						errors.push(`head_person.assignment_date_invalid`);
					}
				}
				catch(e)
				{
					errors.push(`head_person.assignment_date`);
					errors.push(`head_person.assignment_date_invalid`);
				}
			}

			if(!head_person.indefinite)
			{
				if(head_person.credentials_dateend === undefined || head_person.credentials_dateend === null || head_person.credentials_dateend === "")
				{
					errors.push(`head_person.credentials_dateend`);
				}

				if(head_person.credentials_dateend !== undefined && head_person.credentials_dateend !== null && head_person.credentials_dateend !== "")
				{
					try
					{
						const date = moment(head_person.credentials_dateend);
						const today = moment();

						if(date < today)
						{
							errors.push(`head_person.credentials_dateend`);
							errors.push(`head_person.credentials_dateend_invalid`);
						}
					}
					catch(e)
					{
						errors.push(`head_person.credentials_dateend`);
						errors.push(`head_person.credentials_dateend_invalid`);
					}
				}
			}

			if(head_person.telephone === "" || head_person.telephone === null || isNaN(parseInt(head_person.telephone.replace(/[^\d]+/g, ''), 10)) || parseInt(head_person.telephone.replace(/[^\d]+/g, ''), 10).toString().length < 11)
			{
				errors.push(`head_person.telephone`);
			}

			const email_regex = new RegExp(/[^@\s]+@[^@\s]+\.[^@\s]+/);
			if(!email_regex.test(head_person.email))
			{
				errors.push(`head_person.email`);
			}

			//8004
			//930118
			if(parseInt(_get(head_person, "identity_document.doctype"), 10) === 100000000 && errors.indexOf("head_persor.identity_document.seria") < 0 && errors.indexOf("head_persor.identity_document.docnumber") < 0)
			{
				const head_person_document_check_response = await checkDocumentData({
					seria: head_person.identity_document.seria, 
					number: head_person.identity_document.docnumber, 
				});

				if(head_person_document_check_response[0] !== undefined && head_person_document_check_response[0].qc !== 0)
				{
					errors.push(`head_person.identity_document.invalid`);
					errors.push(`head_person.identity_document.seria`);
					errors.push(`head_person.identity_document.docnumber`);
				}
			}

			//переданы
			if(signatory_person.delegation_agreement)
			{
				const main_check = [
					"individual_executive_inn", 
					"individual_executive_kpp", 
					"individual_executive_oop", 
					"individual_executive_docnum", 
					"individual_executive_docdate", 
				];

				for(let i in main_check)
				{
					let v = _get(main, main_check[i]);

					if(main_check[i] === "individual_executive_inn")
					{
						if(v !== null && !is_valid_inn(v.replace(/[^\d]+/g, '')))
						{
							errors.push(`main.individual_executive_inn`);
						}
					}
					else
					{
						if(v === "" || v === null)
						{
							errors.push(`main.${ main_check[i] }`);
						}
					}
				}

				if(delegation_files.length === 0) { errors.push(`delegation_files`); }
			}

			//иной подписант
			if(signatory_person.not_head_person)
			{
				const signatory_person_check = [
					"lastname", 
					"firstname", 
					"jobtitle", 
					"signer_rule_basic", 
					"email", 
					"identity_document.seria", 
					"identity_document.docnumber", 
					"identity_document.issuedate", 
					"identity_document.placebirth", 
					"identity_document.citizenship.code", 
					"identity_document.registration_address.name", 
				];

				if(parseInt(_get(signatory_person, "identity_document.doctype"), 10) === 100000000)
				{
					signatory_person_check.push("identity_document.code");
					signatory_person_check.push("identity_document.issueby");
				}

				if(parseInt(signatory_person.signer_rule_basic, 10) === 100000003)
				{
					signatory_person_check.push("signer_rule_basic_add");
				}

				if(signatory_person.telephone === "" || signatory_person.telephone === null || isNaN(parseInt(signatory_person.telephone.replace(/[^\d]+/g, ''), 10)) || parseInt(signatory_person.telephone.replace(/[^\d]+/g, ''), 10).toString().length < 11)
				{
					errors.push(`signatory_person.telephone`);
				}

				const email_regex = new RegExp(/[^@\s]+@[^@\s]+\.[^@\s]+/);
				if(!email_regex.test(signatory_person.email))
				{
					errors.push(`signatory_person.email`);
				}

				if(signatory_person_files.length === 0) { errors.push(`signatory_person_files`); }

				if(parseInt(signatory_person.signer_rule_basic, 10) === 100000000 || parseInt(signatory_person.signer_rule_basic, 10) === 100000003)
				{
					signatory_person_check.push("docdate");
					signatory_person_check.push("docnumber");

					if(signatory_corporate_files.length === 0) { errors.push(`signatory_corporate_files`); }
				}

				for(let i in signatory_person_check)
				{
					let v = _get(signatory_person, signatory_person_check[i]);

					if(v === "" || v === null)
					{
						errors.push(`signatory_person.${ signatory_person_check[i] }`);
					}
				}

				if(parseInt(_get(signatory_person, "identity_document.doctype"), 10) === 100000000 && errors.indexOf("signatory_person.identity_document.seria") < 0 && errors.indexOf("signatory_person.identity_document.docnumber") < 0)
				{
					const signatory_person_document_check_response = await checkDocumentData({
						seria: signatory_person.identity_document.seria, 
						number: signatory_person.identity_document.docnumber, 
					});
	
					if(signatory_person_document_check_response[0] !== undefined && signatory_person_document_check_response[0].qc !== 0)
					{
						errors.push(`signatory_person.identity_document.invalid`);
						errors.push(`signatory_person.identity_document.seria`);
						errors.push(`signatory_person.identity_document.docnumber`);
					}
				}
			}

			if(head_person_files.length === 0) { errors.push(`head_person_files`); }

			if(head_person.lastname !== null && head_person.lastname !== "" && head_person.firstname !== null && head_person.firstname !== "")
			{
				if(signatory_person.lastname !== null && signatory_person.lastname !== "" && signatory_person.firstname !== null && signatory_person.firstname !== "")
				{
					if(head_person.lastname === signatory_person.lastname && head_person.firstname === signatory_person.firstname)
					{
						errors.push(`signatory_person.identical`);
					}
				}
			}

			this.setState({ errors, loading: false }, () => 
			{
				window.scroll(0, 0);
				if(errors.length === 0)
				{
					this.ref_submit.current.click();
				}
			});
		});
	}

	_handle_onFormSubmit = (event) => 
	{
		event.preventDefault();

		this._handle_onCheckboxFieldChange("step", 4);
		setTimeout(() => 
		{
			saveQuestionnaire();
			this.props.onNextStep("shareholders");
		}, 10);
	}

	render()
	{
		const { checking } = this.props;
		const { loading, main, head_person, signatory_person, status, errors, 
			head_person_files, 
			signatory_person_files, 
			signatory_corporate_files, 
			delegation_files, 
			signer_from_list, 
			client_contacts, 
		} = this.state;

		console.log({ errors });

		let head_person_citizenship = { label: getCitizenshipTitleByCode(head_person.identity_document.citizenship.code), code: head_person.identity_document.citizenship.code };
		let signatory_person_citizenship = { label: getCitizenshipTitleByCode(signatory_person.identity_document.citizenship.code), code: signatory_person.identity_document.citizenship.code };

		return (
			<React.Fragment>
				<form ref={ this.ref_form } onSubmit={ this._handle_onFormSubmit } onKeyDown={(e) => {if (e.key === 'Enter') e.preventDefault() }} className={`questionnaire questionnaire_3 ${ checking && "disabled" }`}>
					<p className="title">3. Информация о единоличном исполнительном органе, подписанте договора лизинга</p>
					{ errors.length > 0 && 
					( 
						<FormMessage type="error" title="Ошибка" message="Пожалуйста, проверьте корректность заполнения данных в форме."/>
					) }
					<div className="form_field">
						<label>Фамилия <sup className="required_label">*</sup></label>
						<SuggestsInput 
							className={ errors.indexOf("head_person.lastname") > -1 ? "error" : "" } 
							type="lastname" 
							id="head_person.lastname" 
							name="head_person.lastname" 
							value={ this._checkStrValue(head_person.lastname) } 
							placeholder="Введите фамилию" 
							onChange={ (value) => { this._removeError("head_person.lastname"); this._handle_onTextFieldChange("head_person.lastname", value); } }
							required={ true } 
							disabled={ checking } 
						/>
					</div>
					<div className="form_field">
						<label>Имя <sup className="required_label">*</sup></label>
						<SuggestsInput 
							className={ errors.indexOf("head_person.firstname") > -1 ? "error" : "" } 
							type="firstname" 
							id="head_person.firstname" 
							name="head_person.firstname" 
							value={ this._checkStrValue(head_person.firstname) } 
							placeholder="Введите имя" 
							onChange={ (value) => { this._removeError("head_person.firstname"); this._handle_onTextFieldChange("head_person.firstname", value) } } 
							required={ true } 
							disabled={ checking } 
						/>
					</div>
					<div className="form_field">
						<label>Отчество <small>если имеется</small></label>
						<SuggestsInput 
							type="middlename" 
							id="head_person.middlename" 
							name="head_person.middlename" 
							value={ this._checkStrValue(head_person.middlename) } 
							placeholder="Введите отчество" 
							onChange={ (value) => { this._removeError("head_person.middlename"); this._handle_onTextFieldChange("head_person.middlename", value) } } 
							required={ false } 
							disabled={ checking } 
						/>
					</div>
					<div className="form_field">
						<label>Тип документа <sup className="required_label">*</sup></label>
						<Select 
							id="head_person.identity_document.doctype" 
							name="head_person.identity_document.doctype" 
							options={ doctypes_personal } 
							placeholder="Выберите тип документа" 
							noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
							isSearchable={ false } 
							className="autocomlete" 
							classNamePrefix="react-select" 
							value={ doctypes_personal.filter((type) => head_person.identity_document.doctype === type.value) } 
							onChange={ (element) => this._handle_onDocumentTypeChange("head_person", element) } 
							required={ true } 
							isDisabled={ checking } 
						/>
					</div>

					{ errors.indexOf("head_person.identity_document.invalid") > -1 && 
					( 
						<FormMessage type="error" title="Ошибка" message="Указаны недействительные паспортные данные."/>
					) }

					<div className="formgroup">
						<div className="form_field">
							<label>Серия паспорта <sup className="required_label">*</sup></label>
							<InputMask 
								className={ errors.indexOf("head_person.identity_document.seria") > -1 ? "error" : "" } 
								mask='9999' 
								id="head_person.identity_document.seria" 
								name="head_person.identity_document.seria" 
								value={ this._checkStrValue(head_person.identity_document.seria) } 
								placeholder="Введите серию" 
								onChange={ (event) => { this._removeError(["head_person.identity_document.seria", "head_person.identity_document.invalid"]); this._handle_onTextFieldChange(event.target.name, event.target.value) } } 
								required={ true } 
								disabled={ checking } 
							/>
						</div>
						<div className="form_field">
							<label>Номер паспорта <sup className="required_label">*</sup></label>
							<InputMask 
								className={ errors.indexOf("head_person.identity_document.docnumber") > -1 ? "error" : "" } 
								mask='999999' 
								id="head_person.identity_document.docnumber" 
								name="head_person.identity_document.docnumber" 
								value={ this._checkStrValue(head_person.identity_document.docnumber) } 
								placeholder="Введите номер" 
								onChange={ (event) => { this._removeError(["head_person.identity_document.docnumber", "head_person.identity_document.invalid"]); this._handle_onTextFieldChange(event.target.name, event.target.value) } } 
								required={ true } 
								disabled={ checking }>
							</InputMask>
						</div>
					</div>

					<div className="formgroup">
						<div className="form_field">
							<label>Дата выдачи <sup className="required_label">*</sup></label>
							<CalendarDatePicker 
								className={ errors.indexOf("head_person.identity_document.issuedate") > -1 ? "error" : "" } 
								placeholder="ДД.ММ.ГГГГ" 
								max={ moment().toDate() } 
								id={ "head_person.identity_document.issuedate" } 
								value={ this._checkStrValue(head_person.identity_document.issuedate) !== "" ? this._checkStrValue(head_person.identity_document.issuedate) : null } 
								onChange={ (date) => { this._removeError("head_person.identity_document.issuedate"); this._handle_onTextFieldChange("head_person.identity_document.issuedate", date); } } 
								required={ true } 
								disabled={ checking } 
							/>
						</div>
						{ parseInt(head_person.identity_document.doctype, 10) === 100000000 && (
							<div className="form_field">
								<label>Код подразделения <sup className="required_label">*</sup></label> 
								<DocumentIssuerSuggestsInput 
									className={ errors.indexOf("head_person.identity_document.code") > -1 ? "error" : "" } 
									type="issuer" 
									id="head_person.identity_document.code" 
									name="head_person.identity_document.code" 
									value={ this._checkStrValue(head_person.identity_document.code) } 
									placeholder="Введите код" 
									onChange={ (value) => { this._removeError("head_person.identity_document.code"); this._handle_onIssuerCodeChange("head_person", value); } } 
									maxResults={ 5 } 
									required={ true } 
									disabled={ checking } 
								/>
							</div>
						) }
					</div>

					{ parseInt(head_person.identity_document.doctype, 10) === 100000000 && (
						<div className="form_field">
							<label>Кем выдан <sup className="required_label">*</sup></label>
							<DocumentIssuerSuggestsInput 
								className={ errors.indexOf("head_person.identity_document.issueby") > -1 ? "error" : "" } 
								type="issuer" 
								id="head_person.identity_document.issueby" 
								name="head_person.identity_document.issueby" 
								value={ this._checkStrValue(head_person.identity_document.issueby) } 
								placeholder="Введите наименование подразделения выдавшего документ" 
								onChange={ (value) => { this._removeError("head_person.identity_document.issueby"); this._handle_onIssuerChange("head_person", value); } } 
								required={ true } 
								disabled={ checking } 
							/>
						</div>
					) }
					<div className="form_field">
						<label>Место рождения <sup className="required_label">*</sup></label>
						<AddressSuggests 
							className={ errors.indexOf("head_person.identity_document.placebirth") > -1 ? "error" : "" } 
							id={ "head_person.identity_document.placebirth" } 
							value={ this._checkStrValue(head_person.identity_document.placebirth) } 
							placeholder="Укажите место рождения" 
							onChange={ (data) => { this._removeError("head_person.identity_document.placebirth"); this._handle_onTextFieldChange("head_person.identity_document.placebirth", data.name) } } 
							required={ true } 
							disabled={ checking } 
						/>
					</div>

					{ parseInt(head_person.identity_document.doctype, 10) !== 100000000 && (
						<div className="form_field">
							<label>Гражданство <sup className="required_label">*</sup></label>
							<Select 
								id="head_person.identity_document.citizenship" 
								name="head_person.identity_document.citizenship" 
								options={ citizenships } 
								placeholder="Выберите страну" 
								noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
								isSearchable={ true } 
								className="autocomlete" 
								classNamePrefix="react-select" 
								value={ head_person_citizenship.code !== null ? head_person_citizenship : undefined } 
								onChange={ (element) => { this._removeError("head_person.identity_document.citizenship"); this._handle_onCitizenshipChange(`head_person.identity_document.citizenship`, element.value) } } 
								required={ true } 
								isDisabled={ checking } 
							/>
						</div>
					) }
					<div className="form_field">
						<label>Адрес регистрации <sup className="required_label">*</sup></label>
						<AddressSuggests 
							className={ errors.indexOf("head_person.identity_document.registration_address.name") > -1 ? "error" : "" } 
							value={ this._checkStrValue(head_person.identity_document.registration_address.name) } 
							fias={ this._checkStrValue(head_person.identity_document.registration_address.fias_id) } 
							placeholder="Укажите адрес регистрации" 
							onChange={ (data) => { this._removeError("head_person.identity_document.registration_address.name"); this._handle_onTextFieldChange("head_person.identity_document.registration_address", data) } } 
							required={ true } 
							disabled={ checking } 
						/>
					</div>

					<div className="form_field">
						<label>Должность <sup className="required_label">*</sup></label>
						<input type="text" 
							className={ errors.indexOf("head_person.jobtitle") > -1 ? "error" : "" } 
							id="head_person.jobtitle" 
							name="head_person.jobtitle" 
							value={ this._checkStrValue(head_person.jobtitle) } 
							placeholder="Укажите должность" 
							onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
							required={ true } 
							disabled={ checking } 
						/>
					</div>
					
					<div className="form_field">
						<label>Телефон <sup className="required_label">*</sup></label>
						<InputMask 
							className={ errors.indexOf("head_person.telephone") > -1 ? "error" : "" } 
							mask='+7 (999) 999 99 99' 
							id={ "head_person.telephone" } 
							name={ "head_person.telephone" } 
							value={ this._checkStrValue(head_person.telephone) } 
							placeholder="Введите номер телефона" 
							onChange={ (event) => { if(event.target.value !== "" && !isNaN(parseInt(event.target.value.replace(/[^\d]+/g, ''), 10)) && parseInt(event.target.value.replace(/[^\d]+/g, ''), 10) > 7) { this._removeError("head_person.telephone"); } this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
							required={ true } 
							disabled={ checking } 
						/>
					</div>

					<div className="form_field">
						<label>Адрес E-mail <sup className="required_label">*</sup></label>
						<input type="email" 
							className={ errors.indexOf("head_person.email") > -1 ? "error" : "" } 
							id={ "head_person.email" } 
							name={ "head_person.email" } 
							value={ this._checkStrValue(head_person.email) } 
							placeholder="Введите E-mail" 
							onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
							pattern="[^@\s]+@[^@\s]+\.[^@\s]+" 
							required={ true } 
							disabled={ checking } 
						/>
					</div>

					{ errors.indexOf("head_person.assignment_date_invalid") > -1 && 
					(
						<FormMessage type="error" title="Ошибка" message="Пожалуйста, укажите прошедшую дату."/>
					) }

					<div className="form_field picker">
						<label>Дата назначения <sup className="required_label">*</sup></label>
						<div style={{ display: "flex", flexWrap: "wrap", width: "calc(100% - 198px)"}}>
							<CalendarDatePicker 
								className={ errors.indexOf("head_person.assignment_date") > -1 ? "error" : "" } 
								placeholder="ДД.ММ.ГГГГ" 
								max={ moment().toDate() } 
								id={ "head_person.assignment_date" } 
								value={ this._checkStrValue(head_person.assignment_date) !== "" ? this._checkStrValue(head_person.assignment_date) : null } 
								onChange={ (date) => { this._removeError([ "head_person.assignment_date", "head_person.assignment_date_invalid" ]); this._handle_onTextFieldChange("head_person.assignment_date", date) } } 
								required={ true } 
								disabled={ checking } 
								style={{maxWidth: "320px"}}
							/>
							<div className="form_field checkbox" style={{width: "auto", marginLeft: "28px"}}>
								<input type="checkbox" 
									hidden="" 
									id="head_person.indefinite" 
									name="head_person.indefinite" 
									checked={ head_person.indefinite } 
									onChange={ (event) => this._handle_onIndefiniteChange() } 
									disabled={ checking } 
								/>
								<label htmlFor="head_person.indefinite" className="unselectable">Полномочия бессрочны</label>
							</div>
						</div>
					</div>
					{ !head_person.indefinite && (
						<React.Fragment>
							{ errors.indexOf("head_person.credentials_dateend_invalid") > -1 && 
							(
								<FormMessage type="error" title="Ошибка" message="Срок полномочий пройден. Пожалуйста, введите корректную дату."/>
							) }
							<div className="form_field picker">
								<label>Дата окончания полномочий <sup className="required_label">*</sup></label>
								<div style={{ display: "flex", flexWrap: "wrap", width: "calc(100% - 198px)" }}>
									<CalendarDatePicker 
										className={ errors.indexOf("head_person.credentials_dateend") > -1 ? "error" : "" } 
										min={ moment().toDate() } 
										placeholder="ДД.ММ.ГГГГ" 
										id={ "head_person.credentials_dateend" } 
										value={ this._checkStrValue(head_person.credentials_dateend) !== "" ? this._checkStrValue(head_person.credentials_dateend) : null } 
										onChange={ (date) => { this._removeError([ "head_person.credentials_dateend", "head_person.credentials_dateend_invalid" ]); this._handle_onTextFieldChange("head_person.credentials_dateend", date) } } 
										required={ true } 
										disabled={ checking } 
										style={{maxWidth: "320px"}}
									/>
								</div>
							</div>
						</React.Fragment>
					) }

					{ errors.indexOf("head_person_files") > -1 && 
					( 
						<FormMessage type="error" title="Ошибка" message="Пожалуйста, приложите как минимум одно отсканированное изображение или фотографию документа, подтверждающего личность."/>
					) }
					<FilesList 
						maxFiles={ 2 } 
						name="head_person_files" 
						files={ head_person_files } 
						onAddFile={ (name, files) => { this._removeError("head_person_files"); this._handle_onAddFile(name, files); } } 
						onRemoveFile={ this._handle_onRemoveFile } 
						checking={ checking } 
						title="Прикрепить скан паспорта единоличного исполнительного органа" 
					/>
					<input type="text" id="head_person_files_error_check" onChange={ () => {} } value={ head_person_files.length > 0 ? head_person_files.length : "" } required={ true } style={{ opacity: 0.0, height: "0px", marginTop: "-25px", display: "flex" }}/>

					{ main.inn !== null && main.inn.length < 11 && 
					(
						<React.Fragment>
							<div className="form_field">
								<div className="form_field checkbox">
									<input type="checkbox" 
										hidden="" 
										id="signatory_person.delegation_agreement" 
										name="signatory_person.delegation_agreement" 
										checked={ signatory_person.delegation_agreement } 
										onChange={ this._handle_onChangeDelegationAgreement } 
										disabled={ checking } 
									/>
									<label htmlFor="signatory_person.delegation_agreement" className="unselectable">Полномочия единоличного исполнительного органа переданы управляющей организации или управляющему</label>
								</div>
							</div>

							{ signatory_person.delegation_agreement && (
								<React.Fragment>
									<p className="title">Информация об управляющей организации или управляющем</p>

									{ errors.indexOf("main.individual_executive_inn") > -1 && 
									( 
										<FormMessage type="error" title="Ошибка" message="Указанный вами ИНН невалиден, пожалуйста, убедитесь в правильности ввода."/>
									) }

									<div className="formgroup" style={{ width: "100%" }}>
										<div className="form_field" style={{ flexDirection: "row", flexWrap: "nowrap" }}>
											<label>ИНН <sup className="required_label">*</sup></label>
											<InputMask 
												className={ errors.indexOf("main.individual_executive_inn") > -1 ? "error" : "" } 
												style={{ width: "100%" }} 
												mask='999999999999' 
												//maskPlaceholder={ main.individual_executive_inn !== null && main.individual_executive_inn.replace(/[^\d.-]+/g, '').length < 11 ? "_" : " " } 
												alwaysShowMask={ false } 
												id="main.individual_executive_inn" 
												name="main.individual_executive_inn" 
												value={ this._checkStrValue(main.individual_executive_inn) } 
												placeholder="Введите ИНН" 
												onChange={ (event) => { this._removeError(event.target.name); this._handle_onInnChange(event.target.value); } } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>
										{ main.individual_executive_inn !== null && main.individual_executive_inn.replace(/[^\d.-]+/g, '').length < 11 && (
											<div className="form_field" style={{ flexDirection: "row", flexWrap: "nowrap" }}>
												<label>КПП <sup className="required_label">*</sup></label>
												<InputMask 
													className={ errors.indexOf("main.individual_executive_kpp") > -1 ? "error" : "" } 
													style={{ width: "100%" }} 
													mask='9999999999' 
													alwaysShowMask={ false } 
													id="main.individual_executive_kpp" 
													name="main.individual_executive_kpp" 
													value={ this._checkStrValue(main.individual_executive_kpp) } 
													placeholder="Введите КПП" 
													onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
													required={ true } 
													disabled={ checking } 
												/>
											</div>
										) }
									</div>

									<div className="form_field">
										<p style={{ paddingBottom: "15px" }}><label>Организационно-правовая форма и полное наименование управляющей организации или управляющего <sup className="required_label">*</sup></label></p>
										<input type="text" 
											className={ errors.indexOf("main.individual_executive_oop") > -1 ? "error" : "" } 
											style={{ width: "100%" }} 
											id="main.individual_executive_oop" 
											name="main.individual_executive_oop" 
											value={ this._checkStrValue(main.individual_executive_oop) } 
											placeholder="Укажите наименование" 
											onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
											required={ true } 
											disabled={ checking } 
										/>
									</div>

									<div className="formgroup" style={{ width: "100%", }}>
										<div className="form_field">
											<label style={{ width: "100%", marginBottom: "12px" }}>Номер договора о передаче полномочий управляющей организации /управляющему <sup className="required_label">*</sup></label>
											<input type="text" 
												className={ errors.indexOf("main.individual_executive_docnum") > -1 ? "error" : "" } 
												style={{ width: "100%" }} 
												id="main.individual_executive_docnum" 
												name="main.individual_executive_docnum" 
												value={ this._checkStrValue(main.individual_executive_docnum) } 
												placeholder="Номер договора" 
												onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
												disabled={ checking } 
											/>
										</div>

										<div className="form_field" style={{ alignItems: "flex-end" }}>
											<label style={{ width: "100%", alignSelf: "flex-start" }}>Дата договора <sup className="required_label">*</sup></label>
											<CalendarDatePicker 
												className={ errors.indexOf("main.individual_executive_docdate") > -1 ? "error" : "" } 
												style={{ width: "100%", }} 
												placeholder="ДД.ММ.ГГГГ" 
												max={ moment().toDate() } 
												id={ "main.individual_executive_docdate" } 
												value={ this._checkStrValue(main.individual_executive_docdate) !== "" ? this._checkStrValue(main.individual_executive_docdate) : null } 
												onChange={ (date) => { this._removeError("main.individual_executive_docdate"); this._handle_onTextFieldChange("main.individual_executive_docdate", date); } } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>
									</div>

									{ errors.indexOf("delegation_files") > -1 && 
									( 
										<FormMessage type="error" title="Ошибка" message="Пожалуйста, приложите как минимум одно отсканированное изображение или фотографию документа, подтверждающего передачу полномочий."/>
									) }
									<FilesList 
										maxFiles={ 2 } 
										name="delegation_files" 
										files={ delegation_files } 
										onAddFile={ (name, files) => { this._removeError("delegation_files"); this._handle_onAddFile(name, files); } } 
										onRemoveFile={ this._handle_onRemoveFile } 
										checking={ checking } 
									/>
									<input type="text" id="delegation_files_error_check" onChange={ () => {} } value={ delegation_files.length > 0 ? delegation_files.length : "" } required={ true } style={{ opacity: 0.0, height: "0px", marginTop: "-25px", display: "flex" }}/>

								</React.Fragment>
							) }
						</React.Fragment>
					) }

					{ errors.indexOf("signatory_person.identical") > -1 && 
					( 
						<FormMessage type="error" title="Ошибка" message={ `Выбранный подписант совпадает с единоличным исполнительным органом. Выберите иного подписанта или снимите галку "Подписант отличается от единоличного исполнительного органа".` }/>
					) }

					<div className="form_field">
						<div className="form_field checkbox">
							<input type="checkbox" 
								hidden="" 
								id="signatory_person.not_head_person" 
								name="signatory_person.not_head_person" 
								checked={ signatory_person.not_head_person } 
								onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, !signatory_person.not_head_person ? true : false) } 
								disabled={ checking } 
							/>
							<label htmlFor="signatory_person.not_head_person" className="unselectable">Подписант отличается от единоличного исполнительного органа</label>
						</div>
					</div>

					{ signatory_person.not_head_person && (
						<React.Fragment>
							<p className="title">Информация о подписанте <small>(заполняется если подписант договора лизинга отличается от единоличного исполнительного органа)</small></p>
							<div className="form_field" style={{ marginBottom: "20px", }}>
								<div className="formgroup control">
									{ !checking && (
										<div className="form_field checkbox">
											<input type="checkbox" hidden="" 
												checked={ signer_from_list } 
												id={ `signer_from_list` } 
												name={ `signer_from_list` } 
												onChange={ (event) => { this.setState({ signer_from_list: signer_from_list ? false : true })} } 
												/>
											<label className="unselectable" htmlFor={ `signer_from_list` }>Выбрать подписанта из списка</label>
										</div>
									) }
								</div>
							</div>

							{ signer_from_list ? (
								<div className="feed" style={{ marginTop: "0px", }}>
									<div className="feed_list">
										{ client_contacts.map((contact, index) => (
											<div className="form_field checkbox" key={ index }>
												<input type="radio" hidden="" 
													id={ `contacts_${ index }` } 
													name={ `contacts_${ index }` } 
													onChange={ () => { this._handle_onSignerFromListSelect(contact) } } 
													disabled={ false } 
												/>
												<label className="unselectable" htmlFor={ `contacts_${ index }` }>
													<div className="feed_item user quest">
														<img src="/assets/images/icons/avatar.svg" alt="" />
														<div>
															<p className="item_title">{ contact.lastname } { contact.firstname } { contact.middlename }</p>
															<p className="item_desc">
																<span>{ contact.jobtitle }</span>
															</p>
														</div>
													</div>
												</label>
											</div>

										)) }
									</div>
								</div>
							) : (
								<React.Fragment>
									<div className="form_field">
										<label>Фамилия <sup className="required_label">*</sup></label>
										<SuggestsInput 
											className={ errors.indexOf("signatory_person.lastname") > -1 ? "error" : "" } 
											type="lastname" 
											id="signatory_person.lastname" 
											name="signatory_person.lastname" 
											value={ this._checkStrValue(signatory_person.lastname) } 
											placeholder="Введите фамилию" 
											onChange={ (value) => { this._removeError("signatory_person.lastname"); this._handle_onTextFieldChange("signatory_person.lastname", value); } } 
											required={ true } 
											disabled={ checking } 
										/>
									</div>

									<div className="form_field">
										<label>Имя <sup className="required_label">*</sup></label>
										<SuggestsInput 
											className={ errors.indexOf("signatory_person.firstname") > -1 ? "error" : "" } 
											type="firstname" 
											id="signatory_person.firstname" 
											name="signatory_person.firstname" 
											value={ this._checkStrValue(signatory_person.firstname) } 
											placeholder="Введите имя" 
											onChange={ (value) => { this._removeError("signatory_person.firstname"); this._handle_onTextFieldChange("signatory_person.firstname", value); } } 
											required={ true } 
											disabled={ checking } 
										/>
									</div>

									<div className="form_field">
										<label>Отчество <small>если имеется</small></label>
										<SuggestsInput 
											type="middlename" 
											id="signatory_person.middlename" 
											name="signatory_person.middlename" 
											value={ this._checkStrValue(signatory_person.middlename) } 
											placeholder="Введите имя" 
											onChange={ (value) => this._handle_onTextFieldChange("signatory_person.middlename", value) } 
											required={ false } 
											disabled={ checking } 
										/>
									</div>

									<div className="form_field">
										<label>Тип документа <sup className="required_label">*</sup></label>
										<Select 
											id="signatory_person.identity_document.doctype" 
											name="signatory_person.identity_document.doctype" 
											options={ doctypes_personal } 
											placeholder="Выберите тип документа" 
											noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
											isSearchable={ false } 
											className="autocomlete" 
											classNamePrefix="react-select" 
											value={ doctypes_personal.filter((type) => signatory_person.identity_document.doctype === type.value) } 
											onChange={ (element) => this._handle_onDocumentTypeChange("signatory_person", element) } 
											required={ true } 
											isDisabled={ checking } 
										/>
									</div>

									{ errors.indexOf("signatory_person.identity_document.invalid") > -1 && 
									( 
										<FormMessage type="error" title="Ошибка" message="Указаны недействительные паспортные данные."/>
									) }

									<div className="formgroup">
										<div className="form_field">
											<label>Серия паспорта <sup className="required_label">*</sup></label>
											<InputMask 
												className={ errors.indexOf("signatory_person.identity_document.seria") > -1 ? "error" : "" } 
												mask='9999' 
												id="signatory_person.identity_document.seria" 
												name="signatory_person.identity_document.seria" 
												value={ this._checkStrValue(signatory_person.identity_document.seria) } 
												placeholder="Введите серию" 
												onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>

										<div className="form_field">
											<label>Номер паспорта <sup className="required_label">*</sup></label>
											<InputMask 
												className={ errors.indexOf("signatory_person.identity_document.docnumber") > -1 ? "error" : "" } 
												mask='999999' 
												id="signatory_person.identity_document.docnumber" 
												name="signatory_person.identity_document.docnumber" 
												value={ this._checkStrValue(signatory_person.identity_document.docnumber) } 
												placeholder="Введите номер" 
												onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>
									</div>

									<div className="formgroup">
										<div className="form_field">
											<label>Дата выдачи <sup className="required_label">*</sup></label>
											<CalendarDatePicker 
												className={ errors.indexOf("signatory_person.identity_document.issuedate") > -1 ? "error" : "" } 
												style={{ width: "calc(100% - 198px)" }} 
												placeholder="ДД.ММ.ГГГГ" 
												max={ moment().toDate() } 
												id={ "signatory_person.identity_document.issuedate" } 
												value={ this._checkStrValue(signatory_person.identity_document.issuedate) !== "" ? this._checkStrValue(signatory_person.identity_document.issuedate) : null } 
												onChange={ (date) => { this._removeError("signatory_person.identity_document.issuedate"); this._handle_onTextFieldChange("signatory_person.identity_document.issuedate", date); } } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>

										<div className="form_field">
											<label>Код подразделения <sup className="required_label">*</sup></label>
											<DocumentIssuerSuggestsInput 
												className={ errors.indexOf("signatory_person.identity_document.code") > -1 ? "error" : "" } 
												type="issuer" 
												id="signatory_person.identity_document.code" 
												name="signatory_person.identity_document.code" 
												value={ this._checkStrValue(signatory_person.identity_document.code) } 
												placeholder="Введите код" 
												onChange={ (value) => { this._removeError("signatory_person.identity_document.code"); this._handle_onIssuerCodeChange("signatory_person", value); } } 
												maxResults={ 5 } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>
									</div>

									<div className="form_field">
										<label>Кем выдан <sup className="required_label">*</sup></label>
										<DocumentIssuerSuggestsInput 
											className={ errors.indexOf("signatory_person.identity_document.issueby") > -1 ? "error" : "" } 
											type="issuer" 
											id="signatory_person.identity_document.issueby" 
											name="signatory_person.identity_document.issueby" 
											value={ this._checkStrValue(signatory_person.identity_document.issueby) } 
											placeholder="Введите наименование подразделения выдавшего документ" 
											onChange={ (value) => { this._removeError("signatory_person.identity_document.issueby"); this._handle_onIssuerChange("signatory_person", value); } } 
											required={ true } 
											disabled={ checking } 
										/>
									</div>

									<div className="form_field">
										<label>Место рождения <sup className="required_label">*</sup></label>
										<AddressSuggests 
											className={ errors.indexOf("signatory_person.identity_document.placebirth") > -1 ? "error" : "" } 
											id={ "signatory_person.identity_document.placebirth" } 
											value={ this._checkStrValue(signatory_person.identity_document.placebirth) } 
											placeholder="Укажите место рождения" 
											onChange={ (data) => { this._removeError("signatory_person.identity_document.placebirth"); this._handle_onTextFieldChange("signatory_person.identity_document.placebirth", data.name); } } 
											required={ true } 
											disabled={ checking } 
										/>
									</div>

									{ parseInt(signatory_person.identity_document.doctype, 10) !== 100000000 && (
										<div className="form_field">
											<label>Гражданство <sup className="required_label">*</sup></label>
											<Select 
												className={ errors.indexOf("signatory_person.identity_document.placebirth") > -1 ? "autocomlete error" : "autocomlete" } 
												id="signatory_person.identity_document.citizenship" 
												name="signatory_person.identity_document.citizenship" 
												options={ citizenships } 
												placeholder="Выберите страну" 
												noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
												isSearchable={ true } 
												classNamePrefix="react-select" 
												value={ signatory_person_citizenship.code !== null ? signatory_person_citizenship : undefined } 
												onChange={ (element) => { this._removeError("signatory_person.identity_document.citizenship"); this._handle_onCitizenshipChange(`signatory_person.identity_document.citizenship`, element.value); } } 
												required={ true } 
												isDisabled={ checking } 
											/>
										</div>
									) }

									<div className="form_field">
										<label>Адрес регистрации <sup className="required_label">*</sup></label>
										<AddressSuggests 
											className={ errors.indexOf("signatory_person.identity_document.registration_address.name") > -1 ? "error" : "" } 
											value={ this._checkStrValue(signatory_person.identity_document.registration_address.name) } 
											fias={ this._checkStrValue(signatory_person.identity_document.registration_address.fias_id) } 
											onChange={ (data) => { this._removeError("signatory_person.identity_document.registration_address.name"); this._handle_onTextFieldChange("signatory_person.identity_document.registration_address", data); } } 
											required={ true } 
											disabled={ checking } 
										/>
									</div>

									<div className="form_field">
										<label>Должность <sup className="required_label">*</sup></label>
										<input type="text" 
											className={ errors.indexOf("signatory_person.jobtitle") > -1 ? "error" : "" } 
											id="signatory_person.jobtitle" 
											name="signatory_person.jobtitle" 
											value={ this._checkStrValue(signatory_person.jobtitle) } 
											placeholder="Укажите должность" 
											onChange={ (event) => { this._removeError("signatory_person.jobtitle"); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
											required={ true } 
											disabled={ checking } 
										/>
									</div>

									<div className="formgroup">
										<div className="form_field">
											<label>Телефон <sup className="required_label">*</sup></label>
											<InputMask 
												className={ errors.indexOf("signatory_person.telephone") > -1 ? "error" : "" } 
												id={ "signatory_person.telephone" } 
												name={ "signatory_person.telephone" } 
												value={ this._checkStrValue(signatory_person.telephone) } 
												placeholder="Введите номер телефона" 
												onChange={ (event) => { this._removeError("signatory_person.telephone"); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
												required={ true } 
												disabled={ checking } 
												mask='+7 (999) 999 99 99' 
											/>
										</div>

										<div className="form_field">
											<label>E-mail <sup className="required_label">*</sup></label>
											<input type="email" 
												className={ errors.indexOf("signatory_person.email") > -1 ? "error" : "" } 
												id="signatory_person.email" 
												name="signatory_person.email" 
												value={ this._checkStrValue(signatory_person.email) } 
												placeholder="E-mail" 
												onChange={ (event) => { this._removeError("signatory_person.email"); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
												pattern="[^@\s]+@[^@\s]+\.[^@\s]+" 
												required={ true } 
												disabled={ checking } 
											/>
										</div>
									</div>

									{ errors.indexOf("signatory_person_files") > -1 && 
									( 
										<FormMessage type="error" title="Ошибка" message="Пожалуйста, приложите как минимум одно отсканированное изображение или фотографию документа, подтверждающего личность."/>
									) }
									<FilesList 
										maxFiles={ 2 } 
										title="Прикрепить скан паспорта подписанта" 
										name="signatory_person_files" 
										files={ signatory_person_files } 
										onAddFile={ (name, files) => { this._removeError("signatory_person_files"); this._handle_onAddFile(name, files); } } 
										onRemoveFile={ this._handle_onRemoveFile } 
										checking={ checking } 
									/>
									<input type="text" id="signatory_person_files_error_check" onChange={ () => {} } value={ signatory_person_files.length > 0 ? signatory_person_files.length : "" } required={ true } style={{ opacity: 0.0, height: "0px", marginTop: "-25px", display: "flex" }}/>

									<p><b>Реквизиты документа подтверждающие полномочия на подписание договора лизинга</b></p>

									<div className="form_field">
										<label>Право подписи на основании <sup className="required_label">*</sup></label>
										<Select 
											className={ errors.indexOf("signatory_person.signer_rule_basic") > -1 ? "autocomlete error" : "autocomlete" } 
											id="signatory_person.signer_rule_basic" 
											name="signatory_person.signer_rule_basic" 
											options={ doctypes_corporate } 
											placeholder="Вид документа" 
											noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" } 
											isSearchable={ true } 
											classNamePrefix="react-select" 
											value={ doctypes_corporate.filter((type) => signatory_person.signer_rule_basic === type.value) } 
											onChange={ (element) => { this._removeError("signatory_person.signer_rule_basic"); this._handle_onTextFieldChange(`signatory_person.signer_rule_basic`, element.value); } } 
											required={ true } 
											isDisabled={ checking } 
										/>
									</div>

									{ parseInt(signatory_person.signer_rule_basic, 10) === 100000003 && (
										<div className="form_field">
											<label>Наименование документа <sup className="required_label">*</sup></label>
											<input type="text" 
												className={ errors.indexOf("signatory_person.signer_rule_basic_add") > -1 ? "error" : "" } 
												id="signatory_person.signer_rule_basic_add" 
												name="signatory_person.signer_rule_basic_add" 
												value={ this._checkStrValue(signatory_person.signer_rule_basic_add) } 
												placeholder="Наименование документа" 
												onChange={ (event) => { this._removeError("signatory_person.signer_rule_basic_add"); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
												required={ true } 
												disabled={ checking } 
											/>
										</div>
									) }

									{ (parseInt(signatory_person.signer_rule_basic, 10) === 100000000 || parseInt(signatory_person.signer_rule_basic, 10) === 100000003) && (
										<>
											<div className="formgroup">
												<div className="form_field">
													<label>Номер документа <sup className="required_label">*</sup></label>
													<input type="text" 
														className={ errors.indexOf("signatory_person.docnumber") > -1 ? "error" : "" } 
														id="signatory_person.docnumber" 
														name="signatory_person.docnumber" 
														value={ this._checkStrValue(signatory_person.docnumber) } 
														placeholder="Номер документа" 
														onChange={ (event) => { this._removeError("signatory_person.docnumber"); this._handle_onTextFieldChange(event.target.name, event.target.value); } } 
														required={ true } 
														disabled={ checking } 
													/>
												</div>

												<div className="form_field">
													<label>Дата документа <sup className="required_label">*</sup></label>
													<CalendarDatePicker 
														className={ errors.indexOf("signatory_person.docdate") > -1 ? "error" : "" } 
														style={{ width: "calc(100% - 198px)" }} 
														placeholder="ДД.ММ.ГГГГ" 
														max={ moment().toDate() } 
														id={ "signatory_person.docdate" } 
														value={ this._checkStrValue(signatory_person.docdate) !== "" ? this._checkStrValue(signatory_person.docdate) : null } 
														onChange={ (date) => { this._removeError("signatory_person.docdate"); this._handle_onTextFieldChange("signatory_person.docdate", date); } } 
														required={ true } 
														disabled={ checking } 
													/>
												</div>
											</div>

											{ errors.indexOf("signatory_corporate_files") > -1 && 
											( 
												<FormMessage type="error" title="Ошибка" message="Пожалуйста, приложите как минимум одно отсканированное изображение или фотографию документа, подтверждающего право подписи."/>
											) }
											<FilesList 
												maxFiles={ 2 } 
												title="Прикрепить скан документа на право подписи" 
												name="signatory_corporate_files" 
												files={ signatory_corporate_files } 
												onAddFile={ (name, files) => { this._removeError("signatory_corporate_files"); this._handle_onAddFile(name, files); } } 
												onRemoveFile={ this._handle_onRemoveFile } 
												checking={ checking } 
											/>
											<input type="text" id="signatory_corporate_files_error_check" onChange={ () => {} } value={ signatory_corporate_files.length > 0 ? signatory_corporate_files.length : "" } required={ true } style={{ opacity: 0.0, height: "0px", marginTop: "-25px", display: "flex" }}/>
										</>
									) }
								</React.Fragment>
							) }
						</React.Fragment>
					) }

					{ !checking && (
						<div className="action">
							<button type="button" className="button button-blue" onClick={ this._handle_onNextPage }>
								{ loading ? (
									<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "4px" }}/>
								) : "Продолжить" }
							</button>
							<button ref={ this.ref_submit } type="submit" style={{ display: "none" }}/>
							{ status !== "empty" && (
								<>
									<br/><br/>
									<a style={{ cursor: "pointer" }} onClick={ this._handle_onReset }>Отменить изменения в анкете</a>
								</>
							) }
						</div>
					) }
				</form>
			</React.Fragment>
		)
	}
}

function mapStateToProps(state, ownProps)
{
	return {
		questionnaire: state.questionnaire, 
	}
}

export const getServerSideProps = reduxWrapper.getServerSideProps(store => 
	async ({ req, res, query }) => 
	{
    }
);

export default connect(mapStateToProps)(Form_3_Signer);