{% extends "webapp/index_page.html" %}
	{% load static %}
{% load crispy_forms_tags %}

    {% block extrahead %}
<style>
    .div-1 {

  box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45);
  border-radius: 10px;
 }
 .rounded_div{
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px; margin-bottom:10px;
}
</style>
    {% endblock extrahead %}


		  {% block body %}




       <div class="row ">
        <div class="col-md-2"></div>

    <div class="col-md-7 div-1 " >
        <div class="" style="margin-top:-15%;">
            {% if response %}
            <div class="alert alert-success" role="alert">
                {{response}}

</div>
            {% endif %}
                <form method="post" action="{% url 'home' %}">
            {% csrf_token %}
            <p class="h4 mb-3 sanserif text-center" >Add Info</p><br>
            <div class="row">
                <div class="col-6" >
                     {{ form.choose_type|as_crispy_field }}
                    </div>
            </div>

             <div class="row">
                <div class="col-6" >
                     {{ form.name|as_crispy_field }}
                    </div>

                <div class="col-6" id="special_div" >
                     {{ form.special|as_crispy_field }}
                    </div>

            </div>
                    <div class="row">

                         <div class="col-6" >
                     {{ form.notes|as_crispy_field }}
                    </div>


            </div>
            <div class="rounded_div input_county_wrap">
             <div class="row ">
                 <div class="col-6" >
                     {{ form.country|as_crispy_field }}
                </div>
                 <div class="col-6" >
                     <input type="button"  class="btn btn-primary add_county_button" value="Add">
                    </div>
            </div>
                 <div class="row input_address_wrap">

                 <div class="col-6" >
                     {{ form.address|as_crispy_field }}
                    </div>
                      <div class="col-6" >
                    </div>
            </div>
            <div class="row input_fields_wrap" >
                <div class="col-6" >
                     {{ form.number|as_crispy_field }}
                    </div>
                <div class="col-6" >

                    </div>
                </div>




</div>

           <button style="margin-bottom:30px;margin-top:10px;border-color:darkgoldenrod;border-radius:10px;" type="submit" class="btn-block btn btn-success">Add</button>
      </form>
    </div>
    </div>
    </div>

		  {% endblock body %}




{% block extra_scripts %}
<script>

        $("#id_choose_type").change(function(){
        var choice  = document.getElementById("id_choose_type").value;

        if (choice == "doctor")
        {
          $("#special_div").show();
        }
        else {
            $("#special_div").hide();
        }
});

</script>



<script>
    function addbutton (id){
    var id = id
    var max_fields      = 5; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="col-6"><input type="number" name="number'+ (x)+'" placeholder="Contact Number" class="numberinput" required="" id="id_number"> <a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
};


    $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_address_wrap"); //Fields wrapper

    var add_button      = $(".add_address_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="col-6"><input type="text" name="address'+ (x)+'" placeholder="Address" class="textinput textInput" required="" id="id_address"> <a href="#" class="remove_field">Remove</a></div>'); //add input box


        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});



 $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_county_wrap"); //Fields wrapper

    var add_button      = $(".add_county_button"); //Add button ID

    var x = 0; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append(` <div class="rounded_div input_county_wrap">
             <div class="row">
                 <div class="col-6">



    <div id="div_id_country" class="control-group">

            <label for="id_country" class="control-label requiredField">
                Country<span class="asteriskField">*</span>
            </label>







            <div class="controls">

                    <select name="country${x}" class="select" required="" id="id_country">
  <option value="" selected="">Selected value</option>

  <option value="1">قنا</option>

  <option value="2">قوص</option>

  <option value="3">دشنا</option>

  <option value="4">نجع حمادي</option>

  <option value="5">قفط</option>

  <option value="6">ابو تشت</option>

  <option value="7">فرشوط</option>

  <option value="8">نقادة</option>

  <option value="9">الوقف</option>

</select>













            </div>

    </div>


                </div>
                 <div class="col-6">

                    </div>
            </div>
                 <div class="row input_address_wrap">

                 <div class="col-6">



    <div id="div_id_address" class="control-group">

            <label for="id_address" class="control-label requiredField">
                Address<span class="asteriskField">*</span>
            </label>







            <div class="controls">

                    <input type="text" name="address${x}" class="textinput textInput" required="" id="id_address">

            </div>

    </div>

                    </div>
                      <div class="col-6">

                    </div>
            </div>
            <div class="row input_fields_wrap">
                <div class="col-6">

                    <div id="div_id_number" class="control-group">

            <label for="id_number" class="control-label ">
                Number
            </label>







            <div class="controls">

                    <textarea name="number${x}" cols="40" rows="3" placeholder="You can Add multiple Numbers Should be Quma Separated eg : 4010410410,14014140" class="textarea" id="id_number"></textarea>

            </div>

    </div>


                    </div>
                </div>


</div>`); //add input box


        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});


</script>
{% endblock extra_scripts %}