{% extends 'partials/base.html' %}

{% load thumbnail %}


{% 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.value }}</p>
                                <div class="polsF1 pols-edit disTab">
                                    <select id="location-country">
                                    </select>
    
                                    <select id="location-region">
                                    </select>
    
                                    <select id="location-city" 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>
                    </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>
       $(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 %}