<div class="content" id="content">
    <div class="table">
        <div class="tableRow" style="height: 10%">
            <div class="tableCell">
                 
                 <p class="titlePage"> Monitoreo </p>
                 
            </div>
        </div>
        
        <div class="tableRow">
            <div class="tableCell">
                
                    <div class=centeredImage style="height: 100%">
                        <div class="headerFilter">
                            <div class="subTitlePage">
                                <p style="font-weight: 400;"> Operaciones </p>
                            </div>
                            
                            <div class="inputsContainer">
                               <div class="inputContainer">
                                   <label for="search" class="ordered"> Buscar </label>
                                    <input class="inputElement searching" type="text" id="search" name="search" style="border: none"> 
                                    <div class="iconContainerSearch">
                                        <i class="fas fa-search" id="iconSearch"></i>
                                    </div>
                                </div>
                                
                                <div class="inputContainer tabtext">
                                   <label for="orderBy" class="ordered"> Ordenar por </label>
                                    <select class="inputElement selectOrderBy" id="orderBy" name="orderBy" placeholder="Nombre" style="border: none"> 
                                        <option value="1" selected> Más reciente </option>
                                        <option value="7" > Tipo </option>
                                        <option value="3" > Usuario </option>
                                        <option value="4" > Moneda </option>
                                        <option value="6" > Cantidad </option>
                                        <option value="5" > Estatus </option>
                                    </select>
                                    <div class="iconContainerArrow">
                                        <i class="fas fa-caret-down" id="arrowOrderBy"></i>
                                    </div>
                                </div>
                                <div class="inputContainer tabtext">
                                    <select class="inputElement selectOrderBy" id="orderDirect" name="orderBy" placeholder="Nombre" style="border:none;width:70px" > 
                                        <option value="asc"> Asc </option>
                                        <option value="desc" selected> Desc </option>
                                    </select>
                                    <div class="iconContainerArrow" style="width: 15px;text-align: center;">
                                        <i class="fas fa-caret-down" style="width:auto" id="arrowOrderDir"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tableContainer">
                            <div class="rowContainer" style="height: 80%">
                                <div class="cellCnt">
                                    <div class="tableCurrencies">
                                        
                                        <div class="headerTableCurrencies tabtext">
                                            <div class="inputContainer selectorbox" style="padding-left: 8px">
                                                <select class="inputElement selectOrderBy" id="rangeFilter" style="border: none; width: 100%"> 
                                                    <option value='' selected style="font-size: 13px"> Rango de Fechas </option>
                                                    <option value="1" style="font-size: 13px"> Hoy </option>
                                                    <option value="2" style="font-size: 13px"> Últimos 7 días </option>
                                                    <option value="3" style="font-size: 13px"> Últimos 30 días </option>
                                                    <option value="3" style="font-size: 13px"> Últimos 3 meses </option>
                                                    <option value="3" style="font-size: 13px"> Últimos 6 meses </option>
                                                </select>
                                                <div class="iconContainerArrow">
                                                    <i class="fas fa-caret-down" id="arrowRangeFilter"></i>
                                                </div>
                                            </div>
                                            
                                            <div class="inputContainer selectorbox">
                                                <select class="inputElement selectOrderBy" id="typeFilter" style="border: none; width: 100%"> 
                                                    <option value='' selected style="font-size: 13px"> Seleccionar Tipo </option>
                                                    <option value="1" style="font-size: 13px"> Depósito </option>
                                                    <option value="2" style="font-size: 13px"> Retiro </option>
                                                    <option value="3" style="font-size: 13px"> Transferencia </option>
                                                </select>
                                                <div class="iconContainerArrow">
                                                    <i class="fas fa-caret-down" id="arrowTypeFilter"></i>
                                                </div>
                                            </div>
                                            
                                            <div class="inputContainer selectorbox">
                                                <select class="inputElement selectOrderBy" id="currencyFilter" style="border: none; width: 100%"> 
                                                    <option value='' selected style="font-size: 13px"> Seleccionar Moneda </option>
                                                </select>
                                                <div class="iconContainerArrow">
                                                    <i class="fas fa-caret-down" id="arrowCurrencyFilter"></i>
                                                </div>
                                            </div>
                                            
                                            <div class="inputContainer selectorbox">
                                                <select class="inputElement selectOrderBy" id="statusFilter" style="border: none; width: 100%"> 
                                                    <option value='' selected style="font-size: 13px"> Seleccionar Estatus </option>
                                                    <option value="1" style="font-size: 13px"> Pendiente </option>
                                                    <option value="2" style="font-size: 13px"> Aprobado </option>
                                                    <option value="3" style="font-size: 13px"> Rechazado </option>
                                                </select>
                                                <div class="iconContainerArrow">
                                                    <i class="fas fa-caret-down" id="arrowStatusFilter"></i>
                                                </div>
                                            </div>
                                            
                                            <div class="inputContainer selectorbox">
                                                <select class="inputElement selectOrderBy" id="registerFilter" style="border: none; width: 100%"> 
                                                    <option value='10' selected style="font-size: 13px"> Ver 10 Registros </option>
                                                    <option value='25' style="font-size: 13px"> Ver 25 Registros </option>
                                                    <option value="50" style="font-size: 13px"> Ver 50 Registros </option>
                                                    <option value="100" style="font-size: 13px"> Ver 100 Registros </option>
                                                </select>
                                                <div class="iconContainerArrow">
                                                    <i class="fas fa-caret-down" id="arrowRegisterFilter"></i>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="headerTableCurrencies" style="border: none; padding-top: 0px">
                                            <div class="inputContainer">
                                                <p style="font-size: 70%"> </p>
                                            </div>
                                            
                                            <div class="inputContainer">
                                               <p id="msgErrorLevelFilter" class="msgError" style="font-size: 70%; display: none"> Error al cargar los niveles </p>
                                            </div>
                                            
                                            
                                            <div class="inputContainer">
                                                <p style="font-size: 70%">  </p>
                                            </div>
                                        </div>
                                        
                                        
                                        
                                        <!-- <div class="headerTableCurrencies" style="border: none">
                                            <span> Usuario </span>
                                            
                                            <span style="padding-left: 67px;"> Último Acceso </span>
                                                
                                            <span> Nivel </span>
                                            
                                            <span> Estatus </span>
                                            
                                            <span>  </span>
                                        </div> -->
                                        
                                        <div class="rowCurrencie headtop">
                                            <div class="cell1">
                                                <span class="colHead"> Fecha </span>
                                            </div>
                                            <div class="cell2">
                                                <span class="colHead"> Ref </span>
                                            </div>
                                                
                                            <div class="cell5">
                                                <span class="colHead"> Tipo </span>    
                                            </div>
                                            
                                            <div class="cell3">
                                                <span class="colHead"> Usuario </span>    
                                            </div>
                                                
                                            <div class="cell4">
                                                <span class="colHead"> Moneda </span>    
                                            </div>
                                            
                                            <div class="cell6" style="text-align: center">
                                                <span class="colHead"> Cantidad </span>    
                                            </div>
                                            
                                            <div class="cell7">
                                                <span class="colHead"> Estatus </span>    
                                            </div>
                                            
                                            <div class="cell8">
                                                <span>  </span>    
                                            </div>
                                            
                                        </div>
                                        
                                        <p id="messageApi"></p>
                                        <div class="bodyTableCurrencies" id="bodyTableCurrencies">
                                            
                                            <div class="rowCurrencieNoDefine rowImpar" style="display: none;" id="noCurrencieDefine">
                                                <p id="msgInTable"> msg Error </p>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                
                                <div class="cellContainer">
                                    <div class=contentSectionAdd id="addCurrencie">
                                        <div class="triangle-left"></div>
                                        <div class="contentAdd">
                                            <div class="divTitleAdd">
                                                <p class="titleAdd"> Agregar Moneda </p>
                        
                                                <span id="closeSectionAdd">&times;</span>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="rowContainer" style="height: 20%;">
                                <div class="cellContainer"  >
                                    <div class="rowContainer paginator" id="paginator">
                                        <div class="pageCntBox" align="center">
                                            <!--
                                            <p>
                                                <i class='fas fa-angle-left editCurrencie'></i>
                                            </p>-->
                                            
                                            <p>
                                                <i class='fas fa-angle-left editCurrencie'></i>
                                            </p>
                                            
                                            <div arrowsEvent="false" id="numbersPaginator">
                                                   
                                            </div>
                                            
                                            
                                            <p>
                                                <i class='fas fa-angle-right editCurrencie'></i>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
            </div>
        </div>
    
        
        <div class="tableRowFooter" style="height: 10%">
            <div class="tableCell">
                <div class="copyright">
                    <p style="margin-top: 20px; margin-bottom: 20px">&copy; 2020. Totalsoftware de Venezuela - Todos los derechos reservados </p>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal Details Criptomonedas -->
<div id="modalDetailCripto" class="modal">

  <!-- Modal content -->
  <div class="modal-content-detail">
    <div class="headerModal" > 
        <span></span>
        <!--<span id="closeModalDetailCripto">&times;</span>-->
        
    </div>
    
    <div class="bodyModal" style="padding: 0px">
        
        <p class="titleModalDetail" id="titleModalCripto"> Retiro </p>
        
        <div class="tableModalDetail">
            <div style="display: table-row">
                <div  class="rowDetailRetirement firstColDetail">
                    Fecha
                </div>
                <div class="rowDetailRetirement secondColDetail" id="paymentDateCripto">
                    05/05/2020
                </div>
            </div>
            
            <div style="display: table-row">
                <div  class="rowDetailRetirement firstColDetail" id="userOrTxLabel">
                    Usuario Origen
                </div>
                <div class="rowDetailRetirement secondColDetail" id="userOrTxCripto">
                    Pedro Perez
                </div>
            </div>
            
            <div style="display: table-row" id="DestinationColumnCripto">
                <div  class="rowDetailRetirement firstColDetail">
                    Usuario Destino
                </div>
                <div class="rowDetailRetirement secondColDetail" id="userDesTxCripto">
                    Pedro Perez
                </div>
            </div>
            
            <div style="display: table-row">
                <div  class="rowDetailRetirement firstColDetail">
                    TXID
                </div>
                <div class="rowDetailRetirement secondColDetail" id="txIdCripto">
                    8768686J5H5236U029URKLR
                </div>
            </div>
            
            <div class="footerTotalMountModal">
                <div  class="rowDetailRetirement firstColDetail">
                    Cantidad
                </div>
                <div style="text-align: right; padding-right: 15px;"  class="rowDetailRetirement secondColDetail" id="txAmountCripto">
                    100,00
                </div>
            </div>
            
            <div class="footerTotalMountModal">
                <div  class="rowDetailRetirement firstColDetail">
                    Comisión
                </div>
                <div style="text-align: right; padding-right: 15px;"  class="rowDetailRetirement secondColDetail" id="txFeeCripto">
                    5,00
                </div>
            </div>
            
            <div class="footerTotalMountModal">
                <div style="font-weight: bold;" class="rowDetailRetirement firstColDetail">
                    TOTAL
                </div>
                <div style="text-align: right; padding-right: 15px;"  class="rowDetailRetirement secondColDetail" id="txTotalCripto">
                    105,00
                </div>
            </div>
        </div>
        
    </div>
    <div class="footerModal" align="center">
        <button id="buttonAceptModalCripto" align="center"> ACEPTAR </button>
    </div>
    
  </div>

</div>

<!-- Modal Details Retirement Fiat -->
<div id="modalDetailRetirement" class="modal">

  <!-- Modal content -->
  <div class="modal-content-detail">
    <div class="headerModal" > 
        <span></span>
       <!-- <span id="closeModalDetailRetirement">&times;</span>-->
        
    </div>
    
    <div class="bodyModal" style="padding: 0px">
        
        <p class="titleModalDetail" id="titleModalRetirement"> Retiro - FIAT </p>
        
        <div id="approvedOp">
            <div class="dataFlex">
                <div style="width: 50%">
                
                    <div class="inputContainer" style="padding-left: 0px" align="left">
                        <input class="inputElement" type="text" id="refApproved" name="refApproved" style="border: none; width: 90%" placeholder="Nro. Referencia"> 
                    </div>
                    
                </div>
                
                <div style="width: 50%">
                    <div class="inputContainer" style="padding-left: 0px" align="right">
                        <input class="inputElement" type="date" id="dateApproved" name="date" style="border: none; width: 90%; padding-right: 8px" placeholder="fecha"> 
                    </div>
                </div>
            </div>
            
            <div class="divForm">
                <div class="divSearch">
                    <div class="form-input searchText">
                        <p class="poppins-regular">Agregar Soporte</p>
                    </div>
                    <div class="searchBar">
                        <input id="fileDeposit" type="file" class="file" style="position: absolute; left: 0; float:left; width: 101%; bottom: 0; z-index: 4; opacity: 0; 
                            cursor: pointer; height: 100%; cursor: pointer;">
                        <button type="submit" class="accept-buttonImg poppins-medium">
                            BUSCAR
                        </button>
                    </div>
                    <div class="divIcon inputImage">
                        <i class="iconStatus"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tableModalDetail">
            
            <div style="display: table-row">
                <div style=" border-bottom: none; border-width: 2px" class="rowDetailRetirement firstColDetail">
                    Fecha de Retiro
                </div>
                <div style=" border-bottom: none; border-width: 2px"  class="rowDetailRetirement secondColDetail" id="paymentDateRetirement">
                    05/05/2020
                </div>
            </div>
            
            <div style="display: table-row">
                <div style=" border-top: none; border-width: 2px" class="rowDetailRetirement firstColDetail">
                    Referencia
                </div>
                <div style=" border-top: none; border-width: 2px "  class="rowDetailRetirement secondColDetail" id="paymentRefRetirement">
                    8768686J5H5236U029URKLR
                </div>
            </div>
            
            <div style="display: table-row">
                <div style=" border: none" class="rowDetailRetirement firstColDetail">
                    Usuario
                </div>
                <div style=" border: none"  class="rowDetailRetirement secondColDetail" id="userTxRetirement">
                    Pedro Perez
                </div>
            </div>
            
            <div style="display: table-row">
                <div style=" border-top: none; border-width: 2px" class="rowDetailRetirement firstColDetail">
                    Forma de pago
                </div>
                <div style=" border-top: none; border-width: 2px" class="rowDetailRetirement secondColDetail" id="accountDestinationRetirement">
                    Banesco
                </div>
            </div>
            
            <div id="accountDetails1Retirement" style="display: table-row">
            </div>
            <div id="accountDetails2Retirement" style="display: table-row">
            </div>
            <div id="accountDetails3Retirement" style="display: table-row">
            </div>
            <div id="accountDetails4Retirement" style="display: table-row">
            </div>
            
            <div class="footerTotalMountModal" >
                <div style="" class="rowDetailRetirement firstColDetail">
                    Monto
                </div>
                <div style="display: table-cell; width: 60%; text-align: right; padding-right: 15px; font-weight: bold;"  class="rowDetailRetirement" id="txAmountRetirement">
                    100,00
                </div>
            </div>
            
            <div class="footerTotalMountModal" >
                <div style="" class="rowDetailRetirement firstColDetail">
                    Comisión
                </div>
                <div style="display: table-cell; width: 60%; text-align: right; padding-right: 15px; font-weight: bold;"  class="rowDetailRetirement" id="txFeeRetirement">
                    5,00
                </div>
            </div>
            
            <div class="footerTotalMountModal" >
                <div style="display: table-cell; width: 40%; font-weight: bold; color: #7D8B9E; text-align: left; padding-left: 10px;" class="rowDetailRetirement">
                    TOTAL
                </div>
                <div style="display: table-cell; width: 60%; text-align: right; padding-right: 15px; font-weight: bold;"  class="rowDetailRetirement" id="txTotalRetirement">
                    105,00
                </div>
            </div>
        </div>
    </div>
    
    <div>
        <p style="text-align: center; padding-top: 15px;" id="txImgRetirement"> Ver Comprobante <i class='fas fa-eye'></i> </p>
    </div>
    
    <div id="rollbackRetirement">
        <p style="text-align: center;"> Revertir Operación <i class='fas fa-undo-alt'></i> </p>
    </div>
    
    <span id="msgRetirement"></span>
    
    <div class="footerModal" align="center">
        
        <button id="buttonAceptModalRetirement" align="center"> APROBAR </button>
        
        <button id="buttonRejectModalRetirement" style="background: white; color: #4287CE" align="center"> RECHAZAR </button>
        
        <button id="buttonBackModalRetirement" align="center"> ACEPTAR </button>
    </div>
    
  </div>
  
  <div id="imageModalRetirement" class="modal">
        <!-- Modal content -->
        <div class="image-prev">
            <img id="imgPreviewRetirement"/>
            <div>
                <button type="button" id="returnRetirement" class="accept-button">
                    Regresar
                </button>
            </div>
        </div>
    </div>

</div>

<!-- Modal Details Deposit Fiat -->
<div id="modalDetailDeposit" class="modal">

  <!-- Modal content -->
  <div class="modal-content-detail">
    <div class="headerModal" > 
        <span></span>
        <!--<span id="closeModalDetailDeposit">&times;</span>-->
        
    </div>
    
    <div class="bodyModal" style="padding: 0px">
        
        <p class="titleModalDetail" id="titleModalDeposit"> Depósito - VES </p>
        
        <div class="tableModalDetail">
            <div style="display: table-row">
                <div style=" border-bottom: none; border-width: 2px" class="rowDetailRetirement firstColDetail">
                    Fecha de Depósito
                </div>
                <div style=" border-bottom: none; border-width: 2px; text-align: rigth; "  class="rowDetailRetirement secondColDetail" id="paymentDateDeposit">
                    05/05/2020
                </div>
            </div>
            
            <div style="display: table-row">
                <div style=" border: none;" class="rowDetailRetirement firstColDetail">
                    Usuario
                </div>
                <div style=" border: none;"  class="rowDetailRetirement secondColDetail" id="userTxDeposit">
                    Pedro Perez
                </div>
            </div>
            
            <div style="display: table-row">
                <div style=" border-top: none; border-width: 2px" class="rowDetailRetirement firstColDetail">
                    Forma de pago
                </div>
                <div style=" border-top: none; border-width: 2px" class="rowDetailRetirement secondColDetail" id="accountDestinationDeposit">
                    Banesco
                </div>
            </div>
            
            <div style="display: table-row">
                <div style=" border-top: none; border-width: 2px" class="rowDetailRetirement firstColDetail">
                    Referencia
                </div>
                <div style=" border-top: none; border-width: 2px" class="rowDetailRetirement secondColDetail" id="paymentRefDeposit">
                    8768686J5H5236U029URKLR
                </div>
            </div>
            
            <div id="accountDetails1Deposit" style="display: table-row">
            </div>
            <div id="accountDetails2Deposit" style="display: table-row">
            </div>
            <div id="accountDetails3Deposit" style="display: table-row">
            </div>
            <div id="accountDetails4Deposit" style="display: table-row">
            </div>
            
            <div class="footerTotalMountModal">
                <div style="" class="rowDetailRetirement firstColDetail">
                    Monto
                </div>
                <div style="display: table-cell; width: 60%; text-align: right; padding-right: 15px; font-weight: bold;"  class="rowDetailRetirement" id="txAmountDeposit">
                    100,00
                </div>
            </div>
            
            <div class="footerTotalMountModal">
                <div style="" class="rowDetailRetirement firstColDetail">
                    Comisión
                </div>
                <div style="display: table-cell; width: 60%; text-align: right; padding-right: 15px; font-weight: bold;"  class="rowDetailRetirement" id="txFeeDeposit">
                    5,00
                </div>
            </div>
            
            <div class="footerTotalMountModal">
                <div style="display: table-cell; width: 40%; font-weight: bold; color: #7D8B9E; text-align: left; padding-left: 10px;" class="rowDetailRetirement">
                    TOTAL
                </div>
                <div style="display: table-cell; width: 60%; text-align: right; padding-right: 15px; font-weight: bold;"  class="rowDetailRetirement" id="txTotalDeposit">
                    105,00
                </div>
            </div>
        </div>
    </div>
     
    <div>
        <p style="text-align: center; padding-top: 15px;" id="txImgDeposit"> Ver Comprobante <i class='fas fa-eye'></i> </p>
    </div>
    
    <div id="rollbackDeposit">
        <p style="text-align: center;"> Revertir Operación <i class='fas fa-undo-alt'></i> </p>
    </div>
    
    <span id="msgDeposit"></span>
    
    <div class="footerModal" align="center">
        
        <button id="buttonAceptModalDeposit" align="center"> APROBAR </button>
        
        <button id="buttonRejectModalDeposit" style="background: white; color: #4287CE" align="center"> RECHAZAR </button>
        
        <button id="buttonBackModalDeposit" align="center"> ACEPTAR </button>
    </div>
    
    </div>
    <div id="imageModalDeposit" class="modal">
        <!-- Modal content -->
        <div class="image-prev">
            <img id="imgPreview"/>
            <div>
                <button type="button" id="returnDeposit" class="accept-button">
                    Regresar
                </button>
            </div>
        </div>
    </div>
    
<input type="hidden" id="txid">