{% extends 'backend/components/layouts/default.html' %}
{% load static %}

{% block content %}

<div>
    <ul class="flex space-x-2 rtl:space-x-reverse">
        <li>
            <a href="javascript:;" class="text-primary hover:underline">Users</a>
        </li>
        <li class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">
            <span>Account & Settings</span>
        </li>
    </ul>
    <div class="pt-5">
        <div class="flex items-center justify-between mb-5">
            <h5 class="font-semibold text-lg dark:text-white-light">Settings</h5>
        </div>
        <div x-data="{ tab: 'Profile' }">
            <ul class="sm:flex font-semibold border-b border-[#ebedf2] dark:border-[#191e3a] mb-5 whitespace-nowrap overflow-y-auto">
                <li class="inline-block">
                    <a href="javascript:;" class="flex gap-2 p-4 border-b border-transparent hover:border-primary hover:text-primary" :class="{ '!border-primary text-primary': tab == 'Profile' }" @click="tab='Profile'">

                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
                            <circle cx="12" cy="6" r="4" stroke="currentColor" stroke-width="1.5" />
                            <ellipse opacity="0.5" cx="12" cy="17" rx="7" ry="4" stroke="currentColor" stroke-width="1.5" />
                        </svg>
                        Profile
                    </a>
                </li>
                
                <li class="inline-block">
                    <a href="javascript:;" class="flex gap-2 p-4 border-b border-transparent hover:border-warning hover:text-warning" :class="{ '!border-danger text-danger': tab == 'danger-zone' }" @click="tab='danger-zone'">

                        <svg width="24" height="20" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
                            <path
                                d="M3.66122 10.6392C4.13377 10.9361 4.43782 11.4419 4.43782 11.9999C4.43781 12.558 4.13376 13.0638 3.66122 13.3607C3.33966 13.5627 3.13248 13.7242 2.98508 13.9163C2.66217 14.3372 2.51966 14.869 2.5889 15.3949C2.64082 15.7893 2.87379 16.1928 3.33973 16.9999C3.80568 17.8069 4.03865 18.2104 4.35426 18.4526C4.77508 18.7755 5.30694 18.918 5.83284 18.8488C6.07287 18.8172 6.31628 18.7185 6.65196 18.5411C7.14544 18.2803 7.73558 18.2699 8.21895 18.549C8.70227 18.8281 8.98827 19.3443 9.00912 19.902C9.02332 20.2815 9.05958 20.5417 9.15224 20.7654C9.35523 21.2554 9.74458 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8478 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.9021C15.0117 19.3443 15.2977 18.8281 15.7811 18.549C16.2644 18.27 16.8545 18.2804 17.3479 18.5412C17.6837 18.7186 17.9271 18.8173 18.1671 18.8489C18.693 18.9182 19.2249 18.7756 19.6457 18.4527C19.9613 18.2106 20.1943 17.807 20.6603 17C20.8677 16.6407 21.029 16.3614 21.1486 16.1272M20.3387 13.3608C19.8662 13.0639 19.5622 12.5581 19.5621 12.0001C19.5621 11.442 19.8662 10.9361 20.3387 10.6392C20.6603 10.4372 20.8674 10.2757 21.0148 10.0836C21.3377 9.66278 21.4802 9.13092 21.411 8.60502C21.3591 8.2106 21.1261 7.80708 20.6601 7.00005C20.1942 6.19301 19.9612 5.7895 19.6456 5.54732C19.2248 5.22441 18.6929 5.0819 18.167 5.15113C17.927 5.18274 17.6836 5.2814 17.3479 5.45883C16.8544 5.71964 16.2643 5.73004 15.781 5.45096C15.2977 5.1719 15.0117 4.6557 14.9909 4.09803C14.9767 3.71852 14.9404 3.45835 14.8478 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74458 2.35523 9.35523 2.74458 9.15224 3.23463C9.05958 3.45833 9.02332 3.71848 9.00912 4.09794C8.98826 4.65566 8.70225 5.17191 8.21891 5.45096C7.73557 5.73002 7.14548 5.71959 6.65205 5.4588C6.31633 5.28136 6.0729 5.18269 5.83285 5.15108C5.30695 5.08185 4.77509 5.22436 4.35427 5.54727C4.03866 5.78945 3.80569 6.19297 3.33974 7C3.13231 7.35929 2.97105 7.63859 2.85138 7.87273"
                                stroke="currentColor"
                                stroke-width="1.5"
                                stroke-linecap="round"
                            />
                        </svg>
                        Settings
                    </a>
                </li>
            </ul>
            <template x-if="tab === 'Profile'">
                <div>
                    <form method="post" enctype="multipart/form-data" class="border border-[#ebedf2] dark:border-[#191e3a] rounded-md p-4 mb-5 bg-white dark:bg-[#0e1726]">
                        {% csrf_token %}
                        <h6 class="text-lg font-bold mb-5">Kindly Update your Profile below.</h6>
                        <div class="flex flex-col sm:flex-row">
                            <div class="ltr:sm:mr-4 rtl:sm:ml-4 w-full sm:w-2/12 mb-5">
                                <input type="file" id="profile_picture" name="profile_picture" accept="image/*" style="display: none;" onchange="previewImage(event)" />
        
                                <label for="profile_picture" x-tooltip="Upload Profile Picture" data-theme="info">
                                    {% if user_profile.profile_picture %}
                                        <img id="imagePreview" src="{{user_profile.profile_picture.url}}" alt="image" class="w-20 h-20 md:w-32 md:h-32 rounded-full object-cover mx-auto cursor-pointer" />
                                    {% else %}
                                        <img id="imagePreview" src="{% static 'assets/images/Blank-Avatar.png' %}" alt="image" class="w-20 h-20 md:w-32 md:h-32 rounded-full object-cover mx-auto cursor-pointer" />
                                    {% endif %}
                                    Upload Profile Picture
                                </label>
                            </div>
                            <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-5">
                                <div>
                                    <label for="first_name">First Name</label>
                                    <input id="first_name" type="text" style="background:#222222;" placeholder="{{user.first_name}}" class="form-input" x-tooltip="This is a read only field" data-theme="info" readonly/>
                                </div>
                                <div>
                                    <label for="last_name">Last Name</label>
                                    <input id="last_name" type="text" style="background:#222222;" placeholder="{{user.last_name}}" class="form-input" x-tooltip="This is a read only field" data-theme="info" readonly/>
                                </div>
                                <div>
                                    <label for="email">Email</label>
                                    <input id="email" type="email" style="background:#222222;" placeholder="{{user.email}}" class="form-input" x-tooltip="This is a read only field" data-theme="info" readonly/>
                                </div>
                                <div>
                                    <label for="phone">Phone</label>
                                    <input id="phone" type="phone" {% if user_profile.phone %} placeholder="{{user_profile.phone}}" value="{{user_profile.phone}}" {% endif %} class="form-input" style="color:black"/>
                                </div>
                                {% if user_profile.is_unknown %}
                                <div class="col-span-2">
                                    <label for="bio">Indicate your Speciality and skills</label>
                                    {% if user_profile.bio %}
                                        <textarea id="bio" name="bio" rows="5" style="width: 100%; box-sizing: border-box;">{{ user_profile.bio }}</textarea>
                                    {% else %}
                                        <textarea id="bio" name="bio" rows="5" style="width: 100%; box-sizing: border-box;" placeholder="Indicate your Speciality and skills" required></textarea>
                                    {% endif %}
                                </div>
                                {% else %}
                                <div class="col-span-2">
                                    <label for="bio">Bio Optional</label>

                                    {% if user_profile.bio %}
                                        <textarea id="bio" name="bio" rows="5" style="width: 100%; box-sizing: border-box;">{{ user_profile.bio }}</textarea>
                                    {% else %}
                                        <textarea id="bio" name="bio" rows="5" style="width: 100%; box-sizing: border-box;" placeholder="Tell us about yourself" required></textarea>
                                    {% endif %}
                                </div>
                                {% endif %}
                                <div class="col-span-2">
                                    <label for="resume_and_certifications">Resume and Certifications</label>
                                    <input id="resume_and_certifications" name="resume_and_certifications" type="file" class="form-input" multiple accept=".pdf" x-tooltip="Upload supporting Resume and Certifications." />
                                    <p class="form-note">Upload Resume and Certifications.</p>
                                </div>
                                <div>
                                </div>
                                <div class="col-span-2">
                                    <label class="flex cursor-pointer items-center">
                                        <input type="checkbox" class="form-checkbox bg-white dark:bg-black" required/>
                                        <span class="text-white-dark">Confirm!: I have provided a profile picture. Default photo will be used if not provided.</span>
                                    </label>
                                </div>
                                <div class="sm:col-span-2 mt-3">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </template>
            
            
            <template x-if="tab === 'danger-zone'">
                <div class="switch">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                        
                        <div class="panel space-y-5">
                            <h5 class="font-semibold text-lg mb-4">Change Password</h5>
                            <p>Once you change your password, you will be logged out.</p>
                            <button class="btn btn-info" onclick="window.location.href = '{% url "change_password" %}'">Change Password</button>
                        </div>
                        

                        <div class="panel space-y-5">
                            <h5 class="font-semibold text-lg mb-4">Delete Account</h5>
                            <p>Once you deactivate the account, there is no going back. Please be certain.</p>
                            <form id="delete-account-form" action="{% url 'delete_account' %}" method="post">
                                {% csrf_token %}
                                <button type="button" class="btn btn-danger btn-delete-account" onclick="confirmDelete()">Deactivate my account</button>
                            </form>
                        </div>
                        
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>
<script>
    function confirmDelete() {
        new window.Swal({
            icon: 'warning',
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonText: 'Delete',
            padding: '2em',
        }).then((result) => {
            if (result.value) {
                
                document.getElementById("delete-account-form").submit();
            }
        });
    }
</script>

<script>
    
    document.addEventListener("alpine:init", () => {
        Alpine.directive("tooltip", (el, {
            expression
        }) => {
            tippy(el, {
                content: expression,
                placement: el.getAttribute("data-placement") || undefined,
                allowHTML: true,
                delay: el.getAttribute("data-delay") || 0,
                animation: el.getAttribute("data-animation") || "fade",
                theme: el.getAttribute("data-theme") || "",
            });
        });
    });
    // JavaScript to trigger file input click event when image is clicked
    document.querySelector('.w-20').addEventListener('click', function() {
        document.getElementById('profile_picture').click();
    });

    // Function to preview the selected image
    function previewImage(event) {
        const preview = document.getElementById('imagePreview');
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "{% static 'assets/images/logo.svg' %}"; // default image if no file selected
        }
    }
</script>


{% endblock %}