{% extends 'partials/base.html' %}
{% load staticfiles %}
{% block content %}
{% include 'partials/header.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">
                    {{ 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">Специализация: {{ form.location}}</p>#}
{#							<p class="name-edit-p">{{ form.contractor_specializations }}</p>#}


                            {% for spec in form.instance.contractor_specializations.all %}
                                <h4>{{ spec }}</h4>
                            {% endfor %}
							<div class="polsF1 pols-edit disTab">
								<select class="selectpicker4">
									<option>Mustard</option>
									<option>Ketchup</option>
									<option>Relish</option>
								</select>
								<select class="selectpicker4">
									<option>Mustard</option>
									<option>Ketchup</option>
									<option>Relish</option>
								</select>


								<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">Местоположение: {{ form.location.value }}</p>
							<div class="polsF1 pols-edit disTab">
								<select id="location-country">
								</select>

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

								<select id="location-city">
								</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" name="{{ form.gender }}"><span></span></label>
							<p>Мужской</p>
							<label class="woman"><input type="radio" name="{{ form.gender }}"><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 class="col-lg-3">Телефон:</div>
					</div>
					<div class="searchF1 polsF1 polsFF polsF3">
						<div class="col-lg-3">
							<input type="text" name="{{ form.website.name }}"class="box-sizing surr surr2" placeholder="beeg.com">
						</div>
						<div class="col-lg-3">
							<input type="text" name="{{ form.skype.name }}" class="box-sizing surr surr2" placeholder="nokia770">
						</div>
{#						<div class="col-lg-3">#}
{#							<input type="text" name="{{ form.phone.name }}" class="box-sizing surr surr2" placeholder="example@gmail.com">#}
{#						</div>#}
						<div class="col-lg-3">
							<input type="text" name="{{ form.phone.name }}" 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(){

           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');

           $.ajax({
               url: '/api/location',
               type: 'GET',
               data:{ csrfmiddlewaretoken : csrftoken},
               dataType:'json',
               'success': function(json){
                   console.log(json.results);
                   var out = ''
                   var outCountry = '';

                   $.each(json.results, function(i,v){
                       if (v.type == 'country'){
                           outCountry += '<option value="' + v.id + '">' + v.name + '</option>';
                       }
                       if (v.type == 'town') {
                           out += '<option value="' + v.id + '">' + v.name + '</option>';
                       }
                   });

                   $('#location-country').html(outCountry);
                   $('#location-city').html(out);
                   $('#location-country').addClass("selectpicker4");
                   $('#location-city').addClass("selectpicker4");
                   $('.selectpicker4').selectpicker({
                        style: 'btn-info',
                        size: 4,
                        width: '237px'
                   });

               }

           });




       });
    </script>
{% endblock %}