{% extends "partials/base.html" %}
{% load static %}

{% block content %}
    <!-- Page Wrapper -->
     <style>
        .settings-profile-upload .profile-pic img{
            height:100px;
        }
        .settings-profile-upload .profile-pic{
            width:100px;
            height: 100px;
        }
        </style>
		<div class="page-wrapper">
            {% include 'partials/error-meg.html' %}
			<div class="content">
				<div class="d-md-flex d-block align-items-center justify-content-between border-bottom pb-3">
					{% block title %}
                    {% include "partials/title.html" with title="Profile" text="Dashboard" textone="Profile" %}
                    {% endblock title %}
					{% comment %} <div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
						<div class="pe-1 mb-2">
							<a href="#" class="btn btn-outline-light bg-white btn-icon" data-bs-toggle="tooltip"
								data-bs-placement="top" aria-label="Refresh" data-bs-original-title="Refresh">
								<i class="ti ti-refresh"></i>
							</a>
						</div>
					</div> {% endcomment %}
				</div>
				<div class="d-md-flex d-block mt-3">
					<div class="settings-right-sidebar me-md-3 border-0">
						<div class="card">
							<div class="card-header">
								<h5>Personal Information</h5>

							</div>
							<div class="card-body">
                                <div class="settings-profile-upload justify-content-center">
                                    <span class="profile-pic">
                                    {% if profile.profile_picture %}
                                    <img id="profile-image" src="{{ profile.profile_picture.url }}" alt="Profile">
                                </span>
                                    {% else %}
                                        <img id="profile-image" src="{% static 'assets/img/profiles/user_profile.png' %}" alt="Default Profile">
                                    {% endif %}
                                    <!-- <div class="title-upload">
                                        <h5>Edit Your Photo</h5>
                                        <a href="#" class="me-2" id="delete-image">Delete</a>
                                        <a href="#" class="text-primary" id="update-image">Update</a>
                                    </div> -->
                                </div>
                                <div class="profile-uploader profile-uploader-two mb-0">
                                    <span class="upload-icon"><i class="ti ti-upload"></i></span>
                                    <div class="drag-upload-btn bg-transparent me-0 border-0">
                                        <p class="upload-btn"><span>Click to Upload</span> or drag and drop</p>
                                        <h6>JPG or PNG</h6>
                                        <h6>(Max 450 x 450 px)</h6>
                                    </div>
                                    <input type="file" class="form-control" id="image_upload">
                                    <div id="upload-message"></div>
                                </div>
                            </div>
                            
						</div>
					</div>
					<div class="flex-fill ps-0 border-0">
						<form>
							<div class="d-md-flex">
								<div class="flex-fill">
									<div class="card">
										<div class="card-header d-flex justify-content-between align-items-center">
											<h5>Personal Information</h5>
											<a href="#" class="btn btn-primary btn-sm" data-bs-toggle="modal"
												data-bs-target="#edit_personal_information"><i
													class="ti ti-edit me-2"></i>Edit</a>
										</div>
										<div class="card-body">
											<div class="d-block d-xl-flex">
												<div class="mb-3 flex-fill me-xl-3 me-0">
													<label class="form-label">First Name</label>
													<input type="text" class="form-control"
														placeholder="Enter First Name" value="{{profile.user.first_name}}" readonly>
												</div>
												<div class="mb-3 flex-fill">
													<label class="form-label">Last Name</label>
													<input type="text" class="form-control"
														placeholder="Enter Last Name" value="{{profile.user.last_name}}" readonly>
												</div>
											</div>
											<div class="mb-3">
												<label class="form-label">Email Address</label>
												<input type="email" class="form-control" placeholder="Enter Email" value="{{profile.user.email|default:form.email.value}}" readonly>
											</div>
											<div class="d-block d-xl-flex">
												<div class="mb-3 flex-fill me-xl-3 me-0">
													<label class="form-label">User Name</label>
													<input type="email" class="form-control"
														placeholder="Enter User Name" value="{{profile.user.username|default:form.username.value}}" readonly>
												</div>
												<div class="mb-3 flex-fill">
													<label class="form-label">Phone Number</label>
													<input type="email" class="form-control"
														placeholder="Enter Phone Number" value="{{ profile.contact_number }}" readonly>
												</div>
											</div>
										</div>
									</div>
									<div class="card">
										<div class="card-header d-flex justify-content-between align-items-center">
											<h5>Address Information</h5>
											<!-- <a href="#" class="btn btn-primary btn-sm" data-bs-toggle="modal"
												data-bs-target="#edit_address_information"><i
													class="ti ti-edit me-2"></i>Edit</a> -->
										</div>
										<div class="card-body">
											<div class="mb-3">
												<label class="form-label">Address</label>
												<input type="text" class="form-control" value="{{profile.address}}" placeholder="Enter Address">
											</div>
											<div class="d-block d-xl-flex">
												<div class="mb-3 flex-fill me-xl-3 me-0">
													<label class="form-label">Country</label>
													<!-- <input type="text" class="form-control" value="{{profile.country}}" placeholder="Enter Country"> -->
                                                    <select name="country" class="form-control" aria-readonly="true" disabled>
                                                        <option value="" disabled selected>Not Selected Country</option>
                                                        {% for country in countries %}
                                                            <option value='{{ country.id }}' {% if profile.country == country.id %}selected{% endif %}>{{ country.country_name }}</option>
                                                        {% endfor %}
                                                        
                                                    </select>
                                                  
												</div>
												<div class="mb-3 flex-fill">
													<label class="form-label">State / Province</label>
													<input type="email" class="form-control" value="{{profile.state}}" placeholder="Enter State">
												</div>
											</div>
											<div class="d-block d-xl-flex">
												<div class="mb-3 flex-fill me-xl-3 me-0">
													<label class="form-label">City</label>
													<input type="email" class="form-control" value="{{ profile.city }}" placeholder="City">
												</div>
												<div class="mb-3 flex-fill">
													<label class="form-label">Postal Code</label>
													<input type="email" class="form-control"
														placeholder="Enter Postal Code" value="{{ profile.postal_code }}">
												</div>
											</div>
										</div>
									</div>
									<!-- <div class="card">
										<div class="card-header d-flex justify-content-between align-items-center">
											<h5>Password</h5>
											<a href="#" class="btn btn-primary btn-sm" data-bs-toggle="modal"
												data-bs-target="#change_password">Change</a> 
										</div>
										<div class="card-body">
											<div class="mb-3 mb-3">
												<label class="form-label">Current Password</label>
												<div class="pass-group d-flex">
													<input type="password" class="pass-input form-control">
													<span class="ti toggle-password ti-eye-off"></span>
												</div>
											</div>
										</div>
									</div>-->
								</div>

							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	<!-- /Page Wrapper -->

    <!-- Edit Profile -->
    <div class="modal fade" id="edit_personal_information">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Personal Information</h4>
                    <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="ti ti-x"></i>
                    </button>
                </div>
                <form action="{% url 'visa_manager_profile_update' %}" method="post">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">First Name <span class="text-danger">*</span></label>
                                    {{ form.first_name }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Last Name <span class="text-danger">*</span></label>
                                    {{ form.last_name }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">User Name</label>
                                    {{ form.username }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Email</label>
                                    {{ form.email }}
                                </div>
                                <!-- <div class="mb-3">
                                    <label class="form-label">Email</label>
                                    <input type="text" class="form-control" placeholder="Enter Email">
                                </div> -->
                                <div class="mb-3">
                                    <label class="form-label">Phone Number <span class="text-danger">*</span></label>
                                    {{ form.contact_number }}

                                </div>
                                <!-- <div class="mb-0">
                                    <label class="form-label">Bio</label>
                                    <input type="text" class="form-control" placeholder="Enter Bio">
                                </div> -->
                            </div>
                           
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">Address</label>
                                    {{ form.address }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Country <span class="text-danger">*</span></label>
                                    {{ form.country }}
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">State/Province</label>
                                    {{ form.state }}                                </div>
                                <div class="mb-3">
                                    <label class="form-label">City</label>
                                    {{ form.city }}                                </div>
                                <div class="mb-0">
                                    <label class="form-label">Postal Code</label>
                                    {{ form.postal_code }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /Edit Profile -->

    <!-- Edit Profile -->
    <!-- <div class="modal fade" id="edit_address_information">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Address Information</h4>
                    <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="ti ti-x"></i>
                    </button>
                </div>
                <form action="profile">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">Address</label>
                                    <input type="text" class="form-control" placeholder="Enter Address">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Country</label>
                                    <input type="text" class="form-control" placeholder="Enter Country">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">State/Province</label>
                                    <input type="text" class="form-control" placeholder="Enter State/Province">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">City</label>
                                    <input type="text" class="form-control" placeholder="Enter City">
                                </div>
                                <div class="mb-0">
                                    <label class="form-label">Postal Code</label>
                                    <input type="text" class="form-control" placeholder="Enter Postal Code">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div> -->
    <!-- /Edit Profile -->

    <!-- Change Password -->
    <!-- <div class="modal fade" id="change_password">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Change Password</h4>
                    <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="ti ti-x"></i>
                    </button>
                </div>
                <form action="profile">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">Current Password</label>
                                    <div class="pass-group d-flex">
                                        <input type="password" class="pass-input form-control">
                                        <span class="ti toggle-password ti-eye-off"></span>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">New Password</label>
                                    <div class="pass-group d-flex">
                                        <input type="password" class="pass-inputs form-control">
                                        <span class="ti toggle-passwords ti-eye-off"></span>
                                    </div>
                                </div>
                                <div class="mb-0">
                                    <label class="form-label">Confirm Password</label>
                                    <div class="pass-group d-flex">
                                        <input type="password" class="pass-inputa form-control">
                                        <span class="ti toggle-passworda ti-eye-off"></span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div> -->
    <!-- /Change Password -->
   

   
    
{% endblock content %}