<!-- Modal -->
<div class="modal fade" id="abono-cuota-alumno" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="tituloFormCuotaAlumno">Abono Cuota de Alumno</h5>
        <button id="cierraModalAddProd" type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="form_cuota_alum" onsubmit="return cobrarCuotaAlumno()">
            <div class="row"> 
                <div class="col-lg-12 col-md-12 row">  
                    <div class="form-group col-md-6">
                        <h5>Selecciona Periodo de Matricula</h5>
                        <div class="controls">
                            <select id="matricula_pago" name="matricula_pago" class="form-control select2" required onchange="verificaMatricula(this.value)">
                                <option value="" ><b>Selecciona</b></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <h5>Selecciona el Mes</h5>
                        <div class="controls">
                            <select id="mes_pago" disabled name="mes_pago[]" class="form-control select2" required onchange="verificaMes(this.value)">
                                <option value="" ><b>Selecciona</b></option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">                    
                    <div class="form-group">
                        <h5>Monto Cuota</h5>
                        <div class="controls">
                            <input type="text" id="monto_cuota" name="monto_cuota" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">                    
                    <div class="form-group">
                        <h5>Multa de Mora</h5>
                        <div class="controls">
                            <input type="text" id="monto_abonado_cuota" name="monto_mora" class="form-control">
                        </div>
                    </div>
                </div>
                            
                <div class="col-lg-6 col-md-12">   
                    <div class="form-group">
                        <h5>Forma de Pago</h5>
                        <div class="controls">
                            <select id="forma_pago_cuota" name="forma_pago" class="form-control select2" onchange="return formaPago(this.value)" required>
                                <option value="" ><b>Selecciona</b></option>
                                <option value="efectivo" ><b>Efectivo</b></option>
                                <option value="cheque" ><b>Cheque</b></option>
                                <option value="transfer" ><b>Transferencia Bancaria</b></option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12 col-md-12 d-none" id="box_monto_saldo_matr">   
                    <div id="alerta_saldo_matr"></div>            
                    <div class="form-group">
                        <h5>Saldo de Matricula</h5>
                        <div class="controls">
                                <input id="saldo_matricula" readonly name="saldo_matricula" class="form-control" >
                        </div>
                    </div>
                </div>

                <div class="col-lg-12 col-md-12 d-none" id="box_monto_saldo">   
                    <div id="alerta_saldo_cuota"></div>      
                    <div class="form-group">
                        <h5>Saldo de Cuota</h5>
                        <div class="controls">
                                <input id="saldo_cuota" readonly name="saldo_cuota" class="form-control" >
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-12 d-none" id="box_banco_cuota">                    
                    <div class="form-group">
                        <h5 id="nombre_pago_2_cuota"></h5>
                        <div class="controls">
                            <input type="text" id="nombre_banco_cuota" name="nombre_banco" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-12 d-none" id="box_cheque_cuota">                    
                    <div class="form-group">
                        <h5 id="numero_pago_2_cuota"></h5>
                        <div class="controls">
                            <input type="text" id="num_cheque_cuota" name="num_cheque" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-12 d-none" id="box_monto_cheque_cuota">                    
                    <div class="form-group">
                        <h5 id="monto_pago_2_cuota"></h5>
                        <div class="controls">
                            <input type="text" id="monto_cheque_cuota" name="monto_cheque" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-12 col-md-12">         
                    <div class="form-group">
                        <h5>Observaciones sobre Matricula</h5>
                        <div class="controls">
                                <textarea id="obs_matricula_cuota" class="form-control" ></textarea>
                        </div>
                    </div>
                </div>


                <div class="container">
                    <div class="form-group">
                        <h3>Datos de Factura</h3>

                        <div class="col-lg-12 col-md-12">                    
                            <div class="form-group">
                                <h5>Número de Factura</h5>
                                <div class="controls">
                                    <input type="text" placeholder="001-002-000563" id="factura" name="factura" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-12">                    
                            <div class="form-group">
                                <h5>Nombre o Razón Social</h5>
                                <div class="controls">
                                    <input type="text" placeholder="Marcelo Rodriguez" id="razon_social" name="razon_social" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-12">                    
                            <div class="form-group">
                                <h5>RUC o Cédula de Identidad</h5>
                                <div class="controls">
                                    <input type="text" placeholder="123456-0" id="ruc_ci" name="ruc_ci" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-12">                    
                            <div class="form-group">
                                <h5>Dirección</h5>
                                <div class="controls">
                                    <input type="text" placeholder="Avda. Charles de Gaulle 1325" id="direccion" name="direccion" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <div class="pull-right">
                    <input type="hidden" id="proceso_cuota" name="proceso"/>
                    <input type="hidden" id="matr" name="matricula"/>
                    <input type="hidden" id="alum" name="idalumno"/>
                    <input type="hidden" id="curso" name="curso"/>
                    <input type="hidden" id="anho" name="anho"/>
                    <button type="submit" class="btn btn-info">Cobrar</button>
                    <button value="Cancelar" type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Cancelar</button> 
                </div>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>