{% extends "base.html" %}

{% block title %}Оплата курсу{% endblock %}

{% block content %}
    <h2>Оплата курсу</h2>
    <h2>Назва курсу: {{ course.title }}</h2>
    <p>Course id: {{ course.id }}(test)</p>


    <div>
        <input type="radio" id="typeUserChoice1" name="type_user" value="student">
        <label for="contactChoice1">Купую своїй дитині</label>

        <input type="radio" id="typeUserChoice2" name="type_user" value="parent">
        <label for="contactChoice2">Купую собі</label>
    </div>



    <div class="form1">
        <form action="." method="post">
            {{ parent_form.as_p }}
            {% csrf_token %}
            <p><input type="submit" value="Зареєструватись1"></p>
         </form>
    </div>

    <div class="form2">
        <form action="." method="post">
            {{ student_form.as_p }}
            {% csrf_token %}
            <p><input type="submit" value="Зареєструватись1"></p>
         </form>
    </div>


    <script>
        let el1 = document.getElementById('typeUserChoice1');
        let el2 = document.getElementById('typeUserChoice2');

        let first_radio = document.querySelector('.form1');
        let two_radio = document.querySelector('.form2');

        el1.addEventListener('click', formFunction);
        el2.addEventListener('click', formFunction);

        function formFunction(){
            let el1 = document.getElementById('typeUserChoice1');
            let el2 = document.getElementById('typeUserChoice2');
            if(el1.checked) {
                first_radio.classList.add('visible');
                two_radio.classList.remove('visible');

            }else if(el2.checked){
                two_radio.classList.add('visible');
                first_radio.classList.remove('visible');
            }else {
                console.log('a')
            }
        }
    </script>


{% endblock %}