{% extends "partials/base.html" %}
{% load static %}
{% load custom_filters %}
{% 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>
                        {% if user.role == 'student'%}
                        <div class="card border-white">
                            <div class="card-body">
                                <div class="d-flex mb-3 justify-content-between">
                                <h5 class="">Malta Info</h5>
                                 {% if malatainfo %}
                                                <a 
                                                href="#" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#exampleModalScrollable2" 
                                                class="btn btn-primary btn-sm float-end"
                                                id="editMaltaBtn"
                                                data-address="{{ malatainfo.malta_address }}"
                                                data-email="{{ malatainfo.malta_email }}"
                                                data-contact="{{ malatainfo.malta_contact }}"
                                                data-emergency="{{ malatainfo.emergency_contact_number }}"
                                                data-relationship="{{ malatainfo.relationship_to_emergency_contact }}">Update</a>
                                        {% else %}        
                                            <a data-bs-toggle="modal" data-bs-target="#exampleModalScrollable2" class="btn btn-primary btn-sm float-end">Add</a>
                                        {% endif %}    
                               
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <span class="avatar avatar-md bg-light-300 rounded me-2 flex-shrink-0 text-default">
                                        <i class="ti ti-map-pin"></i>
                                    </span>
                                    <div>
                                        <span class="text-dark fw-medium mb-1">Address</span>
                                        <p>{{ malatainfo.malta_address|default:"N/A" }}</p>
                                    </div>
                                </div>

                                <div class="d-flex align-items-center">
                                    <span class="avatar avatar-md bg-light-300 rounded me-2 flex-shrink-0 text-default">
                                        <i class="ti ti-mail"></i>
                                    </span>
                                    <div>
                                        <span class="text-dark fw-medium mb-1">Email Address</span>
                                        <p>{{ malatainfo.malta_email|default:"N/A" }}</p>
                                    </div>
                                </div>

                                <div class="d-flex align-items-center mt-3">
                                    <span class="avatar avatar-md bg-light-300 rounded me-2 flex-shrink-0 text-default">
                                        <i class="ti ti-phone"></i>
                                    </span>
                                    <div>
                                        <span class="text-dark fw-medium mb-1">Contact Number</span>
                                        <p>{{ malatainfo.malta_contact|default:"N/A" }}</p>
                                    </div>
                                </div>

                                <div class="d-flex align-items-center mt-3">
                                    <span class="avatar avatar-md bg-light-300 rounded me-2 flex-shrink-0 text-default">
                                        <i class="ti ti-user-heart"></i>
                                    </span>
                                    <div>
                                        <span class="text-dark fw-medium mb-1">Emergency Contact</span>
                                        <p>{{ malatainfo.emergency_contact_number|default:"N/A" }} ({{ malatainfo.relationship_to_emergency_contact|default:"N/A" }})</p>
                                        {% comment %} <p class="small text-muted">{{ malatainfo.emergency_contact_comments|default:"" }}</p> {% endcomment %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endif %}
					</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>Update Password</h5>
											<a href="#" class="btn btn-primary btn-sm" data-bs-toggle="modal"
												data-bs-target="#change_password">Change</a> 
										</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>
                                {% comment %} <div class="mb-3">
                                    <label class="form-label">Email</label>
                                    {{ form.email }}
                                </div> {% endcomment %}
                                <!-- <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 id="updatepassword">
                    <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" name="current_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" name="new_password" class="pass-inputs form-control" placeholder="Abc@1010">
                                        <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" name="confirm_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="butoon" class="btn btn-primary updatepass">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /Change Password -->
   
<div class="modal fade" id="exampleModalScrollable2" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false" aria-hidden="true">
    <!-- Scrollable modal -->
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="staticBackdropLabel2">Add Malta Info</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form id="maltainfo">
            <input type="hidden" name="student_id" value="{{ request.user.id|base64_encode }}">
            <div class="modal-body">                
                <div class="mb-3">
                        <label for="maltaaddress" class="col-form-label">Malta Address:<span class="text-danger">*</span></label>
                    <textarea rows="5" cols="5" class="form-control" id="maltaaddress" name="maltaaddress" placeholder="Enter Address"></textarea>

                </div>
                <div class="mb-3">
                    <label for="maltaemailaddress" class="col-form-label">Email Address:</label>
                    <input type="email" class="form-control" id="maltaemailaddress" name="maltaemailaddress" placeholder="Enter Email Address" />
                </div>
                <div class="mb-3">
                    <label for="maltacontactnumber" class="col-form-label">Contact Number:<span class="text-danger">*</span></label>
                    <input type="number" class="form-control" id="maltacontactnumber" name="maltacontactnumber" placeholder="Enter Contact Number"/>
                </div>
                <div class="mb-3">
                    <label for="emergencycontactnumber" class="col-form-label">Emergency Contact Number:</label>
                    <input type="number" class="form-control" id="emergencycontactnumber" name="emergencycontactnumber" placeholder="Enter Emergency Contact Number"/>
                </div>
                <div class="mb-3">
                    <label for="realtionshipperson" class="col-form-label">Realtionship to this person:</label>
                    <input type="text" class="form-control" id="realtionshipperson" name="realtionshipperson" placeholder="Enter Realtionship to this person"/>
                </div>
                
            
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Close</button>
                <button type="button" id="malatainfosubmit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>
        </div>
    </div>
</div>
   
    
{% endblock content %}
    {% block javascript %}
{{ block.super }}
<script>
    $(document).on("click", "#editMaltaBtn", function () {
    $("#maltaaddress").val($(this).data("address"));
    $("#maltaemailaddress").val($(this).data("email"));
    $("#maltacontactnumber").val($(this).data("contact"));
    $("#emergencycontactnumber").val($(this).data("emergency"));
    $("#realtionshipperson").val($(this).data("relationship"));
    $("#comment").val($(this).data("comment"));
});
$('#exampleModalScrollable2').on('hidden.bs.modal', function () {
    $('#maltainfo')[0].reset();
});
</script>
{% endblock %}