<?php
    if (file_exists("./content/header.php")){
        include_once("./content/header.php");
    }
?>
<div class="pageCnt">
    <div class="centerCell">
        <div class="card">
            <div class="regTitCnt">
                <div class="lvlRegTit poppins-bold" id="titleLvlNat">Nivel Principal</div>
                <div class="lvlRegDsc poppins-regular" id="dscLvlNat">Complete los siguientes datos básicos para utilizar la aplicación</div>
            </div>
            <div class="regForm">
                <div class="tableCnt">
                    <div class="tableForm">
                        <div class="cellForm cellForm50" style="position:relative">
                            <div class="divForm">
                                <div class="cellSwitch">
                                    <div class="toggle">
                                        <label class="switch">
                                            <input type="checkbox" id="venezuelan">
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="cellLbl">
                                    <div class="lblStat poppins-bold">
                                        <span>Es Venezolano</span>
                                    </div>
                                </div>
                            </div>
                            <div class="poppins-regular errorReg"></div>
                            <div class="txtLngCnt">
                            </div>
                        </div>
                        <div class="cellForm cellForm50">
                        </div>
                    </div>
                    <div class="tableForm">
                        <div class="cellForm cellForm50">
                            <div class="divForm">
                                <p class="poppins-bold">Nombres</p>
                                <input type="text" name="fname" placeholder="Nombres" class="frmInpt poppins-regular" id="fname">
                                <div class="poppins-regular errorReg"></div>
                            </div>
                        </div>
                        <div class="cellForm cellForm50">
                            <div class="divForm">
                                <p class="poppins-bold">Apellidos</p>
                                <input type="text" name="flastname" placeholder="Apellidos" class="frmInpt poppins-regular" id="flastname">
                                <div class="poppins-regular errorReg"></div>
                            </div>
                        </div>                       
                    </div>
                    <div class="tableForm tableFormDiv">
                        <div class="cellForm cellForm20" style="padding-right: 0;">
                            <div class="divForm">
                                <p class="poppins-bold">Fecha de Nacimiento</p>
                                <input type="date" name="birthdate" style="text-indent:6px" class="frmInpt poppins-regular" id="birthdate">
                                <div class="poppins-regular errorReg"></div>
                            </div>
                        </div>
                        <div class="cellForm cellForm30" style="padding-right: 0;">
                            <div class="tableForm" style="padding: 0;">
                                <div class="cellForm phoneCodNat">
                                    <div class="divForm" >
                                        <p class="poppins-bold" style="visibility:hidden">-</p>
                                        <select id="phoneCode" name="phoneCode" class="frmInpt poppins-regular">
                                        </select>
                                        <div class="poppins-regular errorReg"></div>
                                    </div>
                                </div>
                                <div class="cellForm cellForm20 phoneNat">
                                    <div class="divForm" >
                                        <p class="poppins-bold">Teléfono</p>
                                        <input maxlength="12" type="tel" name="phone" placeholder="4141234567" class="frmInpt poppins-regular" id="phone">
                                        <div class="poppins-regular errorReg"></div>
                                    </div>
                                </div>  
                            </div>
                        </div>    
                        <div class="cellForm cellForm50">
                            <div class="divForm" >
                                <p class="poppins-bold">País de Residencia</p>
                                <select id="countryid" name="countryid" class="frmInpt poppins-regular">
                                 </select>
                                 <div class="poppins-regular errorReg"></div>
                            </div>
                        </div>               
                    </div>
                    <div class="tableForm">
                        <div class="cellForm cellForm25">
                            <div class="divForm" >
                                <p class="poppins-bold">Identificación</p>
                                <select id="doctype" name="doctype" class="frmInpt poppins-regular">
                                    <option value="" class="poppins-medium" disabled selected id="selectIDSel">Selecciona</option>
                                    <option class="poppins-medium" value="1" id="selectID1">Cédula</option>
                                    <option class="poppins-medium" value="2" id="selectID2">Pasaporte</option>
                                    <option class="poppins-medium" value="3" id="selectID3">Licencia</option>
                                 </select>
                                 <div class="poppins-regular errorReg"></div>
                            </div>
                        </div>
                        <div class="cellForm cellForm25">
                            <div class="divForm">
                                <p class="poppins-bold">Número</p>
                                <input type="text" name="doc" placeholder="Ej: 5.555.555" class="frmInpt poppins-regular" id="doc">
                                <div class="poppins-regular errorReg"></div>
                            </div>
                        </div>
                        <div class="cellForm cellForm50">
                            <div class="divForm">                                
                            </div>
                        </div>                        
                    </div>
                    
                    <div class="upldsCnt tableFormDiv" id="upldsCnt">
                        <div class="tableForm">
                            <div class="cellForm cellForm50">
                                <div class="divForm">
                                    <p class="poppins-bold upsLbl">
                                        Selfie con documento de identidad 
                                        <span class="infBtnLbl poppins-regular">Recomendaciones</span>
                                    </p>
                                    <div class="divSearch">
                                        <div class="frmInpt searchText">
                                            <div class="poppins-regular searchImg">Seleccione</div>
                                        </div>
                                        <div class="searchBar">
                                            <input type="file" class="fileInpt">
                                            <button type="submit" class="blueBtn poppins-medium searchLabel search">
                                                BUSCAR
                                            </button>
                                        </div>
                                    </div>
                                    <div class="poppins-regular errorReg"></div>
                                </div>
                            </div>
                            <div class="cellForm cellForm50">
                                <div class="divForm">
                                    <p class="poppins-bold invisible">-</p>
                                    <div class="tblImgBar">
                                        <div class="cellForm cellForm50 upProgCell invisible">
                                            <div class="progress">
                                                <div class="progBar"></div>
                                                <div class="progInfCnt">
                                                    <div class="cellIcProg">
                                                        <img src="./img/ic_aceptOn.svg">
                                                    </div>
                                                    <div class="cellTxtProg">
                                                        <p class="poppins-regular successfulUploadLabel">
                                                            Carga Exitosa
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="cellForm cellForm25 upPrevCell" >
                                            <button class="notReadyButton poppins-medium" >
                                                Vista Previa
                                            </button>
                                        </div> 
                                        <div class="cellForm cellForm25 upDelCell" >
                                            <button  class="delUp notReadyButton poppins-medium" >
                                                Eliminar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tableForm tableFormDiv">
                        <div class="cellForm cellForm50">
                            <div class="divForm">
                                <p class="poppins-bold">¿Nivel de conocimiento en Criptoactivos?</p>
                                <select class="frmInpt poppins-regular" id="lvlcripto">
                                    <option value="0">Básico</option>
                                    <option value="1">Avanzado</option>
                                 </select>
                                <div class="poppins-regular errorReg"></div>
                            </div>
                        </div> 
                        <div class="cellForm cellForm50">
                        </div>                                               
                    </div>
                    <div class="tableForm tableFormDiv">
                        <div class="cellForm cellForm50" style="position:relative">
                            <div class="divForm">
                                <div class="cellSwitch">
                                    <div class="toggle">
                                        <label class="switch">
                                            <input type="checkbox" id="declaration">
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="cellLbl">
                                    <div class="lblStat poppins-bold">
                                        <span>Confirmar Declaración Jurada </span>
                                        <span class="infBtnLbl poppins-regular" id="viewStatment">Mostrar</span>
                                    </div>
                                </div>
                            </div>
                            <div class="poppins-regular errorReg"></div>
                            <div class="txtLngCnt">
                                <div class="statment" id="declarationTxt" loaded="false">
                                </div>
                            </div>
                        </div>
                        <div class="cellForm cellForm50">
                        </div>
                    </div>
                    <div class="buttons">
                        <div id="previous"><button type="submit" id="previous-button" class="poppins-medium whiteBtn"></button></div>
                        <div id="later"><button type="submit" id="later-button" class="poppins-medium whiteBtn"></button></div>
                        <div id="save"><button type="submit" id="save-button" class="poppins-medium blueBtn"></button></div>
                        <div id="next"><button type="submit" id="next-button" class="poppins-medium blueBtn"></button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- POPS RECOMENDACIONES -->

<div class="expired cardOperations" id="infDocId">
    <div class="clickClose">
        <div class="popImgCnt">
            <div class="regTitCnt">
                <div class="lvlRegTit poppins-bold" id="popdocTit">Documento de Identidad</div>
                <div class="lvlRegDsc poppins-regular" id="popdocDsc">Recomenciones al momento de tomar la foto de su identificación</div>
            </div>
            <div class="tableForm" style=" width: 92%; margin-left: auto; margin-right: auto;">
                <div class="cellForm cellForm50 cellPopImg">
                    <div class="imgInfCnt">
                        <div class="imgDscTbl">
                            <div class="imgDscIc imgIcBad"><i class="fas fa-times-circle icCircleRed"></i></div>
                            <div class="imgDscLbl poppins-regular" id="popdocLbl1">No obstaculice su fotografía</div>
                        </div>
                        <div class="imgCard1 imgCard">
                        </div>
                    </div>
                </div>
                <div class="cellForm cellForm50 cellPopImg">
                    <div class="imgInfCnt">
                        <div class="imgDscTbl">
                            <div class="imgDscIc imgIcBad"><i class="fas fa-times-circle icCircleRed"></i></div>
                            <div class="imgDscLbl poppins-regular" id="popdocLbl2">No incline ni gire su identificación</div>
                        </div>
                        <div class="imgCard2 imgCard">
                        </div>
                    </div>
                </div>
            </div>
            <div class="tableForm"  style="width: 92%; margin-left: auto; margin-right: auto;">
                <div class="cellForm cellForm50 cellPopImg">
                    <div class="imgInfCnt">
                        <div class="imgDscTbl">
                            <div class="imgDscIc imgIcBad"><i class="fas fa-times-circle icCircleRed"></i></div>
                            <div class="imgDscLbl poppins-regular" id="popdocLbl3">No envie una foto desenfocada</div>
                        </div>
                        <div class="imgCard3 imgCard">
                        </div>
                    </div>
                </div>
                <div class="cellForm cellForm50 cellPopImg">
                    <div class="imgInfCnt imgInfCntS">
                        <div class="imgDscTbl">
                            <div class="imgDscIc imgIcOk"><i class="fas fa-times-circle icCircleGreen"></i></div>
                            <div class="imgDscLbl poppins-regular" id="popdocLbl4">Foto e identtificación legibles</div>
                        </div>
                        <div class="imgCard4 imgCard">
                        </div>
                    </div>
                </div>
            </div>
        </div>
   </div>
</div>

<div class="expired cardOperations"  id="infSelfie">
    <div class="clickClose">
        <div class="popImgCnt">
            <div class="regTitCnt">
                <div class="lvlRegTit poppins-bold" id="popselfieTit">Selfie con documento</div>
                <div class="lvlRegDsc poppins-regular" id="popselfieDsc">Recomenciones al momento de tomar su foto personal</div>
            </div>
            <div class="tableForm" style=" width: 92%; margin-left: auto; margin-right: auto;">
                <div class="cellForm cellForm50 cellPopImg">
                    <div class="imgInfCnt">
                        <div class="imgDscTbl">
                            <div class="imgDscIc imgIcBad"><i class="fas fa-times-circle icCircleRed"></i></div>
                            <div class="imgDscLbl poppins-regular" id="popselfieLbl1">No obstaculice su fotografía</div>
                        </div>
                        <div class="selfie1 imgCard">
                        </div>
                    </div>
                </div>
                <div class="cellForm cellForm50 cellPopImg">
                    <div class="imgInfCnt">
                        <div class="imgDscTbl">
                            <div class="imgDscIc imgIcBad"><i class="fas fa-times-circle icCircleRed"></i></div>
                            <div class="imgDscLbl poppins-regular" id="popselfieLbl2">No utilice lentes oscuros</div>
                        </div>
                        <div class="selfie2 imgCard">
                        </div>
                    </div>
                </div>
            </div>
            <div class="tableForm"  style="width: 92%; margin-left: auto; margin-right: auto;">
                <div class="cellForm cellForm50 cellPopImg">
                    <div class="imgInfCnt">
                        <div class="imgDscTbl">
                            <div class="imgDscIc imgIcBad"><i class="fas fa-times-circle icCircleRed"></i></div>
                            <div class="imgDscLbl poppins-regular" id="popselfieLbl3">No envie una foto desenfocada</div>
                        </div>
                        <div class="selfie3 imgCard">
                        </div>
                    </div>
                </div>
                <div class="cellForm cellForm50 cellPopImg">
                    <div class="imgInfCnt imgInfCntS">
                        <div class="imgDscTbl">
                            <div class="imgDscIc imgIcOk"><i class="fas fa-times-circle icCircleGreen"></i></div>
                            <div class="imgDscLbl poppins-regular" id="popselfieLbl4">Foto e identtificación legibles</div>
                        </div>
                        <div class="selfie4 imgCard">
                        </div>
                    </div>
                </div>
            </div>
        </div>
   </div>
</div>