{% extends 'partials/base.html' %}
{% load staticfiles %}
{% load common_tags %}
{% block content %}
{% include 'partials/header2.html' %}
	<div class="container mainScore">
		<div class="row">
            <form method="post" enctype="multipart/form-data">{% csrf_token %}
			<div class="projectsBlock disTab">
				<div class="col-lg-12">
                {% load mptt_tags %}
                    {{ form.errors }}
					<div class="col-lg-3 divCol3">
							<div class="avatar">
								<div class="avatarInset">
									<img src="/media/{{ form.avatar.value }}" alt="profile-image">
								</div>
							</div>
							<div class="menuUser upload-img disTab">
								<div class="upload2 up-l1">
									<input type="file" name="{{ form.avatar.name }}">
									<p>Загрузить фотографию</p>
    							</div>
							</div>
						</div>
					<div class="col-lg-9 divCol9">
						<div class="col-lg-4">
							<p class="name-edit-p">ФИО:</p>
							<input type="text" value="{{ form.first_name.value }}" name="{{ form.first_name.name }}" class="box-sizing inp-edit">
							<input type="text" value="{{ form.last_name.value }}" name="{{ form.last_name.name }}" class="box-sizing inp-edit">
							<input type="text" value="{{ form.patronym.value }}" name="{{ form.patronym.name }}" class="box-sizing inp-edit">
						</div>
						<div class="col-lg-4">
							<p class="name-edit-p">Специализация:</p>
							<div class="polsF1 pols-edit disTab">

                            {% for spec in form.instance.contractor_specializations.all %}
                                <select class="selectpicker4">
                                    {% for sp in nodes %}
                                        <option value="{{ sp.pk }}" {% if spec.pk == sp.pk %}selected{% endif %}>{{ "-"|multiply:sp.level }}{{ sp }}</option>
                                    {% endfor %} }
								</select>
                            {% endfor %}

								<a href="javascript:void(0)" class="add-edit" id="add-edit-spec">
									Добавить еще

								</a>
							</div>
						</div>
						<div class="col-lg-4">
							<p class="name-edit-p">Местоположение:</p>
							<div class="polsF1 pols-edit disTab">

								<select id="location-country">
								</select>

								<select id="location-region">
								</select>

								<select id="location-city" data-id="{{ orm.location.value  }}" name="{{ form.location.name }}">
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="buttonGP btn-edit disTab">
				<div class="btn-group valProject valProject2" role="group" aria-label="...">
  					<button type="button" class="btn btn-default">Общая информация</button>
  					<button type="button" class="btn btn-default">Финансовая информация</button>
				</div>
			</div>
			<div class="col-lg-12 col12 new-filter">
				<div class="filter clearfix">
					<div class="titleF1 disTab">
						<div class="col-lg-7">Дата рождения:</div>
						<div class="col-lg-5">Пол: </div>
					</div>
					<div class="polsF1 disTab">
						<div class="col-lg-7">
                            {{ form.date_of_birth }}
						</div>
						<div class="col-lg-5 dog-new ed-new">

							<label>
                                <input type="radio" value="male" name="{{ form.gender.name }}" {% if form.gender.value == 'male' %} checked {% endif %}><span></span></label>
							<p>Мужской</p>
							<label class="woman">
                                <input type="radio" value="woman" name="{{ form.gender.name }}" {% if form.gender.value == 'woman' %} checked {% endif %}><span></span></label>
							<p>Женский</p>
						</div>
					</div>
					<div class="titleF1 titleF2 disTab">
						<div class="col-lg-3">Сайт:</div>
						<div class="col-lg-3">Skype:</div>

						<div class="col-lg-3">Телефон:</div>
					</div>
					<div class="searchF1 polsF1 polsFF polsF3">
						<div class="col-lg-3">
							<input type="text" name="{{ form.website.name }}" value="{{ form.website.value }}" class="box-sizing surr surr2" placeholder="beeg.com">
						</div>

						<div class="col-lg-3">
							<input type="text" name="{{ form.skype.name }}" value="{{ form.skype.value }}" class="box-sizing surr surr2" placeholder="nokia770">
						</div>

						<div class="col-lg-3">
							<input type="text" name="{{ form.phone.name }}" value="{{ form.phone.value }}" class="box-sizing surr surr2" placeholder="+7 999 999 44 02">
						</div>
					</div>
					<div class="col-lg-12">
						<div class="col-lg-12 make-new make-eed">
							<label>{{ form.cro }}<span></span></label>
							<p>Есть допуск СРО</p>
						</div>
					</div>
					<div class="searchF1 polsF1 polsFF links-filter">
                        <input class="btn-submit-link" type="submit" value="Сохранить" />
					</div>
				</div>
			</div>
            </form>
              {% include 'partials/footer.html' %}
		</div>
	</div>
{% endblock %}
{% block js_block %}
    <script type="text/javascript">
       $(function(){

           var variable = {{  }}

           function getCookie(name) {
                    var cookieValue = null;
                    if (document.cookie && document.cookie != '') {
                        var cookies = document.cookie.split(';');
                        for (var i = 0; i < cookies.length; i++) {
                            var cookie = jQuery.trim(cookies[i]);
                            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                }


           $("#add-edit-spec").on('click',function(){
               $("<select class='selectpicker4'><option >Видное</option></select>").insertBefore("#add-edit-spec");
               $('.selectpicker4').selectpicker({
                        style: 'btn-info',
                        size: 4,
                        width: '237px'
               });

           });
           var csrftoken = getCookie('csrftoken');

           $('#id_date_of_birth_day').addClass('selectpicker2 valul');
           $('#id_date_of_birth_month').addClass('selectpicker left-edit');
           $('#id_date_of_birth_year').addClass('selectpicker5 valul left-edit');

           $('.selectpicker2').selectpicker({
  		        style: 'btn-info',
  		        size: 4,
  		        width: '90px'
           });


	$('.selectpicker5').selectpicker({
  		style: 'btn-info',
  		size: 4,
  		width: '117px'
	});
           $.ajax({
               url: '/api/locations',
               type: 'GET',
               data:{ csrfmiddlewaretoken : csrftoken},
               dataType:'json',
               'success': function(json){
                   console.log(json.results);
                   var outCity, outCountry,outRegion;
                   outCity = outCountry = outRegion = '';

                   $.each(json.results, function(i,v){

                       if (v.type == 'country'){
                           outCountry += '<option value="' + v.id + '">' + v.name + '</option>';
                       }

                       if (v.type == 'region'){
                           outRegion += '<option value="' + v.id + '">' + v.name + '</option>';
                       }

                       if (v.type == 'town') {
                           outCity += '<option value="' + v.id + '">' + v.name + '</option>';
                       }
                   });

                   $('#location-country').html(outCountry);
                   $('#location-city').html(outCity);
                   $('#location-region').html(outRegion);
                   $('#location-country').addClass("selectpicker4");
                   $('#location-city').addClass("selectpicker4");
                   $('#location-region').addClass("selectpicker4");

                   $('.selectpicker4').selectpicker({
                        style: 'btn-info',
                        size: 4,
                        width: '237px'
                   });
               }
           });
       });
    </script>
{% endblock %}