{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}

{%block body%}
<main class="main pages">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a href="{% url 'home:index' %}" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                <span></span> Pages <span></span> My Account
            </div>
        </div>
    </div>
    <div class="page-content pt-50 pb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 m-auto">
                    {% if messages %}
                    <div class="col-lg-6">
                        {% for message in messages %}
            
                        <div    class="alert align-middle alert-{{message.tags}}">
                            
                            <span class="align-middle"> {{message}}</span>
                        </div>
 
                    {% endfor %}
                </div>
                    {% endif %}
                    <div class="row">
                        <div class="col-md-3">
                            <div class="dashboard-menu">
                                <ul class="nav flex-column" role="tablist">
                                    {% comment %} <li class="nav-item">
                                        <a class="nav-link active" id="dashboard-tab" data-bs-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="false"><i class="fi-rs-settings-sliders mr-10"></i>Dashboard</a>
                                    </li> {% endcomment %}
                                    <li class="nav-item">
                                        <a class="nav-link"  href="{% url 'accounts:dashboard_customer'%}" ><i class="fi-rs-shopping-bag mr-10"></i>Orders</a>
                                    </li>
                                    <!-- <li class="nav-item">
                                        <a class="nav-link"  href="{% url 'accounts:order_tracking'%}"  ><i class="fi-rs-shopping-cart-check mr-10"></i>Track Your Order</a>
                                    </li> -->
                                    <li class="nav-item">
                                        <a class="nav-link"  href="{% url 'accounts:download-list' %}" ><i class="fi-rs-cloud-download mr-10"></i>Downloads</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link"  href="{% url 'accounts:change_password' %}"><i class="fi-rs-key mr-10"></i>Change Password</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" id="account-detail-tab" data-bs-toggle="tab" href="#account-detail" role="tab" aria-controls="account-detail" aria-selected="true"><i class="fi-rs-user mr-10"></i>Account details</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'accounts:logout'%}"><i class="fi-rs-sign-out mr-10"></i>Logout</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="tab-content account dashboard-content pl-50">
                              
                                <div class="tab-pane fade active show" id="account-detail" role="tabpanel" aria-labelledby="account-detail-tab">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Account Details</h5>
                                        </div>
                                        <div class="card-body">
                                            
                                            <form method="post" enctype="multipart/form-data">
                                                {% csrf_token %}
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <div class="change-avatar">
                                                                <div class="profile-img">
                                                                    {% if profile.image%}
                                                                    <img id="url-img" src="{{profile.image.url}}" width="180" height="180"   style="width:180px;height:180px;" alt="{{profile.user}}">
                                                                    {%else%}
                                                                    <img id="url-img" width="180" height="180"  style="width:180px;height:180px;" src="{% static 'assets/imgs/theme/avatar.png'%}" alt="User Image">
                                                                    {%endif%}
                                                                    <div class="input-upload change-photo-btn">
                                                                        <span><i class="fa fa-upload"></i> Upload Photo</span>
                                                                        <input type="file" accept="image/*" style="padding: 18px;" id="id_image" name="image" class="form-control upload">
                                                                    </div>
                                                                    <small class="form-text text-muted">Allowed JPG, GIF or PNG. Max size of 2MB</small>
                                                                </div>
                                                                {% comment %} <div class="upload-img">
                                                                    <div class="change-photo-btn">
                                                                        <span><i class="fa fa-upload"></i> Upload Photo</span>
                                                                        <input type="file" accept="image/*" id="id_image" name="image" class="upload">
                                                                    </div>
                                                                    <small class="form-text text-muted">Allowed JPG, GIF or PNG. Max size of 2MB</small>
                                                                </div> {% endcomment %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label>First Name <span class="required">*</span></label>
                                                        <input required="" value="{{profile.user.first_name}}" class="form-control" name="first_name" type="text" />
                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label>Last Name <span class="required">*</span></label>
                                                        <input required="" value="{{profile.user.last_name}}" class="form-control" name="last_name" />
                                                    </div>
                                                   
                                                    <div class="form-group col-md-12">
                                                        <label>Display Name <span class="required">*</span></label>
                                                        <input required=""  value="{{profile.display_name}}" class="form-control" name="display_name" type="text">
                                                    </div>

                                                    <div class="mb-4">
                                                        <label class="form-label">Full description</label>
                                                        <textarea placeholder="" name="bio" class="form-control" rows="4" style="height: 104px;">{{profile.bio}}</textarea>
                                                    </div>

                                                    <div class="form-group col-md-12">
                                                        <label>Mobile number <span class="required">*</span></label>
                                                        <input required="" value="{{profile.mobile_number}}" class="form-control" name="mobile_number" type="text" />
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <label>City <span class="required">*</span></label>
                                                        <input required="" value="{{profile.city}}" class="form-control" name="city" type="text" />
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <label>Address <span class="required">*</span></label>
                                                        <input required="" value="{{profile.address}}" class="form-control" name="address" type="text" />
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <label>Post code<span class="required">*</span></label>
                                                        <input required="" value="{{profile.post_code}}" class="form-control" name="post_code" type="text" />
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <label>Country<span class="required">*</span></label>
                                                        <input required="" value="{{profile.country}}"  class="form-control" name="country" type="text" />
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <label>State<span class="required">*</span></label>
                                                        <input required="" value="{{profile.state}}"  class="form-control" name="state" type="text" />
                                                    </div>
                                                    <div class="col-md-12">
                                                        <button type="submit" class="btn btn-fill-out submit font-weight-bold" name="submit" value="Submit">Save Change</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{%endblock body%}

{%block script%}
        <!-- Vendor JS-->
        <script src="{% static 'assets/js/vendor/modernizr-3.6.0.min.js'%}"></script>
        <script src="{% static 'assets/js/vendor/jquery-3.6.0.min.js'%}"></script>
        <script src="{% static 'assets/js/vendor/jquery-migrate-3.3.0.min.js'%}"></script>
        <script src="{% static 'assets/js/vendor/bootstrap.bundle.min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/slick.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.syotimer.min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/wow.js'%}"></script>
        <script src="{% static 'assets/js/plugins/perfect-scrollbar.js'%}"></script>
        <script src="{% static 'assets/js/plugins/magnific-popup.js'%}"></script>
        <script src="{% static 'assets/js/plugins/select2.min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/waypoints.js'%}"></script>
        <script src="{% static 'assets/js/plugins/counterup.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.countdown.min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/images-loaded.js'%}"></script>
        <script src="{% static 'assets/js/plugins/isotope.js'%}"></script>
        <script src="{% static 'assets/js/plugins/scrollup.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.vticker-min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.theia.sticky.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.elevatezoom.js'%}"></script>
        <!-- Template  JS -->
        <script src="{% static 'assets/js/main.js'%}"></script>
        <script src="{% static 'assets/js/shop.js'%}"></script>
        <script>
			const image = document.getElementById('id_image')
			const subSpecialization = document.getElementById("subspecialization");
			image.addEventListener('change', () => {
				const img_data = image.files[0]
				
				const url = URL.createObjectURL(img_data)
				document.getElementById("url-img").src = url
			})
           
        </script>    

{%endblock script%}