<main>
    <div class="dataPay">
        <img src="./images/ic_estimacion.svg"
            title="Alumnos"
            class="logoStudent">
        <p class="msg">Escriba la informaci&oacute;n de los alumnos a participar en las Olimp&iacute;adas para calcular el monto de inscripci&oacute;n </p>
        <span id="error"></span>
        <div class="optionsBox">
            <div>
                <h2 class="optionsTitle">Eventos</h2>
                <div class="optionInputBox" id="eventsBox">
                    
                </div>
            </div>
            <div>
                <h2 class="optionsTitle">Modalidad de presentación</h2>
                <div class="optionInputBox">
                    <input type="radio" id="online" name="modalidad" value="Online" onchange="recalculateTotal()">
                    <label for="online" class="labelSecond optionInputLabel">Online</label><br>
                </div>
               <!-- <div class="optionInputBox">
                    <input type="radio" id="presencial" name="modalidad" value="Presencial" onchange="recalculateTotal()">
                    <label for="presencial" class="labelSecond optionInputLabel">Presencial</label><br>
                </div>-->
            </div>
        </div>  
        <form class="secondDataBox" id="secondData">
            
            <div class="labelInputRow">
                <div class="labelInput">
                    <label for="newPupils" class="labelSecond labelSecondCol">Cantidad de alumnos a inscribir</label>
                    <input id="newPupils" type="number" placeholder="Ingrese..." class="inputSecond labelInputBox text-right" minvalue="0"/>
                </div>
                
                <div class="labelInput">
                    <label for="additionalPayment" class="labelSecond labelSecondCol">Subtotal a pagar</label>
                    <div class="calculateAmount">
                        <label class="currency currencySecond">$<input type="text" id="newAmount" class="amount amountSecond" value="0,00" readonly></label>
                    </div>
                </div>
            </div>
            
            <div class="labelInputRow">
                <label for="qtyTotal" class="labelSecond">Cupos totales</label>
                <input id="qtyTotal" readonly placeholder="Ingrese..." class="inputSecond readonlyInput" value="0"/>
            </div>
            
            <div class="labelInputRow">
                <label for="totalPupils" class="labelSecond">Alumnos inscritos</label>
                <input id="totalPupils" readonly placeholder="Ingrese..." class="inputSecond readonlyInput" value="0"/>
            </div>
            
            <div class="labelInputRow">
                <label for="allowedQty" class="labelSecond">Cupos disponibles</label>
                <input id="allowedQty" readonly placeholder="Ingrese..." class="inputSecond readonlyInput" value="0"/>
            </div>
            
            <div class="labelInputRow">
                <label for="pupilPrice" class="labelSecond">Precio por alumno por Olimpiada</label>
                <input id="pupilPrice" readonly placeholder="Ingrese..." class="inputSecond readonlyInput" value="0"/>
            </div>
            
            <div class="totalBox">
                <label for="discount" class="labelSecond labelSecondCol">Descuento</label>
                <input id="discount" type="text" placeholder="0" readonly class="inputSecond totalInput readonlyInput" minvalue="0"/>
            </div>
            
            <div class="totalBox">
                <label for="totalPay" class="labelSecond labelSecondCol">Total a pagar</label>
                <input id="totalPay" type="text" placeholder="0" readonly class="inputSecond totalInput readonlyInput" minvalue="0"/>
            </div>
            
            <div class="boxButtonAlign">
                <button type="button" class="registerPay" id="addedNewStudents">Continuar</button>
                <button type="button" class="goBackBtn" onclick="navigationMenu('main')">Volver</button>
            </div>
        </form>
    </div>
    <div class="popupLoad"></div>
</main>