Untitled

<div class='content__item content__item--border bg__content--default'>
    <form nz-form [formGroup]="form">

        <app-personal-information></app-personal-information>


        <!--Số chứng minh thư-->
        <div nz-row [nzGutter]='[30,30]'>

            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Số CMT"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'idNo'"
                ></mb-input-text>
            </div>


            <div nz-col nzXs='24' nzLg='6'>
                <mb-date-picker
                    mbLabelText="Ngày cấp"
                    [mbPlaceholderText]="'dd/mm/yyyy'"
                    [formControlName]="'idDate'"
                ></mb-date-picker>
            </div>


            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Nơi cấp"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'idPlace'"
                ></mb-input-text>
            </div>

        </div>
        <!--End: Số chứng minh thư-->



        <!--Số CCCD-->
        <div nz-row [nzGutter]='[30,30]'>

            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Số CCCD"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'citizenIdNo'"
                ></mb-input-text>
            </div>


            <div nz-col nzXs='24' nzLg='6'>
                <mb-date-picker
                    mbLabelText="Ngày cấp"
                    [mbPlaceholderText]="'dd/mm/yyyy'"
                    [formControlName]="'citizenIdDate'"
                ></mb-date-picker>
            </div>


            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Nơi cấp"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'citizenIdPlace'"
                ></mb-input-text>
            </div>

        </div>
        <!--End: Số CCCD-->



        <!--Số hộ chiếu-->
        <div nz-row [nzGutter]='[30,30]'>

            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Số hộ chiếu"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'passportNo'"
                ></mb-input-text>
            </div>


            <div nz-col nzXs='24' nzLg='6'>
                <mb-date-picker
                    mbLabelText="Ngày cấp"
                    [mbPlaceholderText]="'dd/mm/yyyy'"
                    [formControlName]="'passportDate'"
                ></mb-date-picker>
            </div>


            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Nơi cấp"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'passportPlace'"
                ></mb-input-text>
            </div>

        </div>
        <!--End: Số hộ chiếu-->



        <!--Địa chỉ theo đăng ký hộ khẩu-->
        <div nz-row [nzGutter]='[30,30]'>
            <div nz-col nzXs="24" nzLg="24" class="input__group">
                <label class="input__label">Địa chỉ theo đăng ký hộ khẩu</label>
                <hr class="hrTag">
            </div>
        </div>
        <!--End: Địa chỉ theo đăng ký hộ khẩu-->


        <div nz-row [nzGutter]='[30,30]'>

            <div nz-col nzXs="24" nzLg="6">
                <mb-select
                    mbLabelText="Quốc gia *"
                    [formControlName]="'permanentNationCode'"
                ></mb-select>
            </div>


            <div nz-col nzXs="24" nzLg="6">
                <mb-select
                    mbLabelText="Tỉnh/thành phố *"
                    [formControlName]="'permanentProvinceCode'"
                ></mb-select>
            </div>


            <div nz-col nzXs="24" nzLg="6">
                <mb-select
                    mbLabelText="Quận/Huyện *"
                    [formControlName]="'permanentDistrictCode'"
                ></mb-select>
            </div>


            <div nz-col nzXs="24" nzLg="6">
                <mb-select
                    mbLabelText="Xã/Phường *"
                    [formControlName]="'permanentWardCode'"
                ></mb-select>
            </div>

        </div>


        <div nz-row [nzGutter]='[30,30]'>
            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Số nhà / đường phố, thôn xóm *"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'permanentDetail'"
                ></mb-input-text>
            </div>
        </div>




        <!--Địa chỉ cư trú-->
        <div nz-row [nzGutter]='[30,30]'>
            <div nz-col nzXs="24" nzLg="24" class="input__group">
                <label class="input__label">Địa chỉ cư trú</label>
                <hr class="hrTag">
            </div>
        </div>
        <!--End: Địa chỉ cư trú-->





        <div nz-row [nzGutter]='[30,30]'>

            <div nz-col nzXs="24" nzLg="6">
                <mb-select
                    mbLabelText="Quốc gia *"
                    [formControlName]="'currentNationCode'"
                ></mb-select>
            </div>


            <div nz-col nzXs="24" nzLg="6">
                <mb-select
                    mbLabelText="Tỉnh/thành phố *"
                    [formControlName]="'currentProvinceCode'"
                ></mb-select>
            </div>


            <div nz-col nzXs="24" nzLg="6">
                <mb-select
                    mbLabelText="Quận/Huyện *"
                    [formControlName]="'currentDistrictCode'"
                ></mb-select>
            </div>


            <div nz-col nzXs="24" nzLg="6">
                <mb-select
                    mbLabelText="Xã/Phường *"
                    [formControlName]="'currentWardCode'"
                ></mb-select>
            </div>

        </div>


        <div nz-row [nzGutter]='[30,30]'>
            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Số nhà / đường phố, thôn xóm *"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'currentDetail'"
                ></mb-input-text>
            </div>
        </div>






        <div nz-row [nzGutter]='[30,30]'>
            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Điện thoại liên hệ *"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'mobileNumber'"
                ></mb-input-text>
            </div>

            <div nz-col nzXs='24' nzLg='6'>
                <mb-input-text
                    mbLabelText="Email *"
                    [mbPlaceholderText]="'Nhập thông tin tại đây'"
                    [formControlName]="'email'"
                ></mb-input-text>
            </div>
        </div>




        <!--File đính kèm-->
        <div nz-row [nzGutter]='[30,30]'>
            <div nz-col nzXs='24' nzLg='12' class="input__group">
                <label class="input__label">{{'requestsManager.label.file' | translate}}</label>
                <span class="uploadHintText"> (Hỗ trợ định dạng JPG, PNG và PDF)</span>

                <div class="uploadFile--wrap">

                    <nz-upload
                        [nzMultiple]=" true"
                        [(nzFileList)]="fileList"
                        [nzBeforeUpload]="beforeUpload"
                        [nzRemove]="removeFile"
                        [nzDownload]="downloadFile"
                    >

                        <button class="btnUploadFile">Tải dữ liệu lên</button>

                    </nz-upload>
                </div>

            </div>
        </div>
        <!--End: File đính kèm-->



        <!--Button Lưu lại và Gửi duyệt-->
        <div nz-row [nzGutter]='[30,30]'>
            <div nz-col nzXs='24' nzLg='20'></div>
            <div nz-col nzXs='24' nzLg='4'>
                <mb-button [mbButtonText]="'Lưu lại'" [mbButtonAvailableStyle]="'DEFAULT'"></mb-button>
                <mb-button [mbButtonText]="'Gửi duyệt'" [mbButtonAvailableStyle]="'PRIMARY'"></mb-button>
            </div>
        </div>
        <!--End: Button Lưu lại và Gửi duyệt-->




    </form>
</div>