<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Formulario Educación Virtual</title>
    <link rel="stylesheet" href="{{ asset('resources/css/inscripcion/estilos.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <style>
        /* Agrega estilos básicos aquí */
        body {
            font-family: Arial, sans-serif;
        }

        .inputGroup {
            margin-bottom: 10px;
        }

        .espacio {
            height: 40px;
        }
    </style>
</head>

<body>
    <nav>
        <div id="logo">
            <img src="{{ asset('resources/imgs/inscripcion/logo.png') }}" alt="...">
        </div>
        <div id="title" class="letra">
            <b>FORMULARIO INSCRIPCIÓN VIRTUAL</b>
            <div id="subtitle">Eduación Virtual</div>
        </div>
        <div id="social-work" class="letra2">
            <b>ACA VA EL LOGO</b>
        </div>
    </nav>

    <div class="espacio"></div>
    <div class="container">
        <p><b>Nota:</b> Recuerde que los campos con asterisco son obligatorios (<span class="resaltar"><b>*</b></span>)
        </p>

        <form action="{{ Route('guardarSolicitud') }}" method="post" class="form-group" id="myForm">
            @csrf

            <label for=""><b>1.</b> Nombres Y Apellidos (Los datos suministrados en este campo serán utilizados para generar su factura, escriba su nombre completo tal y como aparece en su documento de identificación)<span class="resaltar"><b>*</b></span></label>
            <input type="text" name="nombre_completo" required placeholder="Escribe tu nombre completo"
                class="form-control text-left w-50" required>
            <br>
            <label for=""><b>2.</b> Tipo de documento identidad<span class="resaltar"><b>*</b></span></label>
            <div id="caja_tipo_documento" class="tipo_documento">
                <select name="tipo_documento" id="tipo_documento" class="form-control"
                    onchange="generarOpcionOtro(this.parentElement.id, this.id)">
                    <option value="">--Seleccione--</option>
                    <option value="CC">CC</option>
                    <option value="TI">TI</option>
                    <option value="Pasaporte">Pasaporte</option>
                    <option value="CE">CE</option>
                    <option value="OTRO">OTRO</option>
                </select>
            </div>

            <br>

            <label for=""><b>3.</b> Número de documento sin puntos ni comas<span
                    class="resaltar"><b>*</b></span></label>
            <input type="number" name="documento" maxlength="11" placeholder="Escribe tu numero de documento"
                class="form-control text-right w-25" required>

            <br>
            
           
            <label for=""><b>4.</b> Correo electrónico<span class="resaltar"><b>*</b></span></label>
            <input type="email" name="correo_pers" class="form-control text-left w-50" placeholder="Correo electrónico"
                required>
            <br>
            <label for=""><b>5.</b> Número de celular<span class="resaltar"><b>*</b></span></label>
            <input type="number" name="num_cel" class="form-control text-left w-25" placeholder="Nùmero de celular"
                required>
            <br>
            <label for=""><b>6.</b> Curso o Diplomado<span class="resaltar"><b>*</b></span></label>
            <div id="curso" class="curso">
                <select name="curso" id="curso" class="form-control"
                    onchange="generarOpcionOtro(this.parentElement.id, this.id)">
                    <option value="">--Seleccione--</option>
                    <option value="CC">CC</option>
                    <option value="TI">TI</option>
                    <option value="Pasaporte">Pasaporte</option>
                    <option value="CE">CE</option>
                    <option value="OTRO">OTRO</option>
                </select>
            </div>
            <br>
            <label for=""><b>7.</b> Precio<span class="resaltar"><b>*</b></span></label>
            <input type="number" name="precio" class="form-control text-left w-25" placeholder="Precio"
                required>
            <br>    
            <label for=""><b>8.</b> Descuento<span class="resaltar"><b>*</b></span></label>
            <input type="text" name="descuento" class="form-control text-left w-25" placeholder="Descuento"
                required>
            <br>
            <label for=""><b>9.</b> Valor total<span class="resaltar"><b>*</b></span></label>
            <input type="text" name="total" class="form-control text-left w-25" placeholder="Valor total"
                required>   

            <br><br>
            <div class="text-center">
                <input type="submit" name="Enviar Formulario" class="btn btn-primary">
            </div>

        </form>
    </div>
    <div class="espacio"></div>

    <script src="{{ asset('resources/js/inscripcion/form.js') }}"></script>
</body>

</html>
