{% extends 'backend/components/layouts/auth.html' %} {% load static %} 
{% block content %}

<div x-data="auth">
    <div class="absolute inset-0">
        <img src="{% static 'assets/images/auth/bg-gradient.png' %}" alt="image" class="h-full w-full object-cover" />
    </div>

    <div class="relative flex min-h-screen items-center justify-center bg-[url(../images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
        <img src="{% static 'assets/images/auth/coming-soon-object1.png' %}" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
        <img src="{% static 'assets/images/auth/coming-soon-object2.png' %}" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
        <img src="{% static 'assets/images/auth/coming-soon-object3.png' %}" alt="image" class="absolute right-0 top-0 h-[300px]" />
        <img src="{% static 'assets/images/auth/polygon-object.svg' %}" alt="image" class="absolute bottom-0 end-[28%]" />
        <div class="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]">
            <div class="relative flex flex-col justify-center rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 px-6 lg:min-h-[758px] py-20">
                
                <div class="mx-auto w-full max-w-[440px]">
                    <div class="mb-10">
                        
                        {% if user.is_authenticated %}
                        <h1 class="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl" >You are logged in as {{user.username}}
                        </h1>
                        <p class="text-base font-bold leading-normal text-white-dark" > Proceed to Dashboard or Logout below
                        </p>
                        {% else %}
                        <h1 class="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl" > 
                            Sign Up
                        </h1>
                        <p class="text-base font-bold leading-normal text-white-dark" > 
                            Continue below to create an account with us
                        </p>
                        {% endif %}
                        
                        {% if messages %}
                        {% for message in messages %}
                            
                                    {% if message.tags == 'success' %}
                                    <h4 class="text-2xl dark:text-white"><strong class="ltr:mr-1 rtl:ml-1">Success!</strong>{{ message }}</h4>
                                    {% elif message.tags == 'error' %}
                                    <h4 class="text-2xl dark:text-white"><strong class="ltr:mr-1 rtl:ml-1">Error!</strong>{{ message }}</h4>
                                    {% else %}
                                    <h4 class="text-2xl dark:text-white">{{ message }}</h4>
                                    {% endif %}
                               
                        {% endfor %}
                    {% endif %}
                    </div>
                    {% if user.is_authenticated %}
                    <div class="text-center px-2 flex justify-around">
                        <a href="{% url 'Dashboard' %}">
                            <button type="button" class="btn btn-secondary ltr:mr-2 rtl:ml-2">
                                Dashboard
                            </button>
                        </a>
                        
                        <a href="{% url 'auth_logout' %}">
                            <button type="button" class="btn btn-success">
                                Logout
                            </button>
                        </a>
                        
                    </div>
                    {% else %}
                    {% if latest_privacy_policy and latest_terms_and_conditions %}
                    <form class="space-y-5 dark:text-white" method="post" action="{% url 'practitioner_signup' %}">
                        {% csrf_token %}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="first_name">First Name</label>
                            <div class="relative text-white-dark">
                                <input id="first_name" name="first_name" type="text" placeholder="Enter First Name" class="form-input ps-10 placeholder:text-white-dark" required/>
                                <span
                                    class="absolute start-4 top-1/2 -translate-y-1/2" >
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" >
                                        <circle cx="9" cy="4.5" r="3" fill="#888EA8" />
                                        <path opacity="0.5" d="M15 13.125C15 14.989 15 16.5 9 16.5C3 16.5 3 14.989 3 13.125C3 11.261 5.68629 9.75 9 9.75C12.3137 9.75 15 11.261 15 13.125Z" fill="#888EA8" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <div>
                            <label for="last_name">Last/Sir Names</label>
                            <div class="relative text-white-dark">
                                <input id="last_name" name="last_name" type="text" placeholder="Enter Last/Sir Name" class="form-input ps-10 placeholder:text-white-dark" required/>
                                <span
                                    class="absolute start-4 top-1/2 -translate-y-1/2" >
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" >
                                        <circle cx="9" cy="4.5" r="3" fill="#888EA8" />
                                        <path opacity="0.5" d="M15 13.125C15 14.989 15 16.5 9 16.5C3 16.5 3 14.989 3 13.125C3 11.261 5.68629 9.75 9 9.75C12.3137 9.75 15 11.261 15 13.125Z" fill="#888EA8" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="email">Email</label>
                            <div class="relative text-white-dark">
                                <input id="email" name="email" type="email" placeholder="Enter Email Address" class="form-input ps-10 placeholder:text-white-dark" required/>
                                <span class="absolute start-4 top-1/2 -translate-y-1/2">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path opacity="0.5" d="M10.65 2.25H7.35C4.23873 2.25 2.6831 2.25 1.71655 3.23851C0.75 4.22703 0.75 5.81802 0.75 9C0.75 12.182 0.75 13.773 1.71655 14.7615C2.6831 15.75 4.23873 15.75 7.35 15.75H10.65C13.7613 15.75 15.3169 15.75 16.2835 14.7615C17.25 13.773 17.25 12.182 17.25 9C17.25 5.81802 17.25 4.22703 16.2835 3.23851C15.3169 2.25 13.7613 2.25 10.65 2.25Z" fill="currentColor" />
                                        <path d="M14.3465 6.02574C14.609 5.80698 14.6445 5.41681 14.4257 5.15429C14.207 4.89177 13.8168 4.8563 13.5543 5.07507L11.7732 6.55931C11.0035 7.20072 10.4691 7.6446 10.018 7.93476C9.58125 8.21564 9.28509 8.30993 9.00041 8.30993C8.71572 8.30993 8.41956 8.21564 7.98284 7.93476C7.53168 7.6446 6.9973 7.20072 6.22761 6.55931L4.44652 5.07507C4.184 4.8563 3.79384 4.89177 3.57507 5.15429C3.3563 5.41681 3.39177 5.80698 3.65429 6.02574L5.4664 7.53583C6.19764 8.14522 6.79033 8.63914 7.31343 8.97558C7.85834 9.32604 8.38902 9.54743 9.00041 9.54743C9.6118 9.54743 10.1425 9.32604 10.6874 8.97558C11.2105 8.63914 11.8032 8.14522 12.5344 7.53582L14.3465 6.02574Z" fill="currentColor" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <div>
                            <label for="phone">Phone (e.g., +254712345678)</label>
                            <div class="relative text-white-dark">
                                <input id="phone" name="phone" type="Phone" placeholder="e.g., +254712345678" class="form-input ps-10 placeholder:text-white-dark" required/>
                                <span class="absolute start-4 top-1/2 -translate-y-1/2">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path
                                            opacity="0.5"
                                            d="M11.6671 10.9108L11.3255 11.2704C11.3255 11.2704 10.5136 12.1252 8.29734 9.79192C6.08109 7.45863 6.89303 6.60381 6.89303 6.60381L7.10814 6.37733C7.63805 5.81943 7.68801 4.92372 7.22568 4.26983L6.27994 2.93221C5.70771 2.12287 4.60197 2.01596 3.94609 2.70648L2.76889 3.94585C2.44367 4.28824 2.22574 4.73209 2.25217 5.22445C2.31978 6.48409 2.85804 9.19429 5.86152 12.3564C9.04661 15.7097 12.0351 15.8429 13.2572 15.7223C13.6438 15.6842 13.9799 15.4757 14.2508 15.1905L15.3163 14.0688C16.0354 13.3117 15.8327 12.0136 14.9125 11.484L13.4796 10.6592C12.8754 10.3115 12.1393 10.4136 11.6671 10.9108Z"
                                            fill="#888EA8"
                                        />
                                        <path
                                            d="M9.94462 1.40987C9.99426 1.10321 10.2842 0.895175 10.5908 0.944823C10.6098 0.948457 10.6709 0.959872 10.7029 0.966999C10.7669 0.981252 10.8562 1.0032 10.9675 1.03561C11.1901 1.10045 11.501 1.20725 11.8742 1.37835C12.6214 1.72092 13.6158 2.32017 14.6476 3.35202C15.6795 4.38387 16.2787 5.37823 16.6213 6.12544C16.7924 6.49865 16.8992 6.8096 16.964 7.03219C16.9965 7.14349 17.0184 7.23276 17.0327 7.29676C17.0398 7.32876 17.045 7.35446 17.0486 7.37344L17.0529 7.39684C17.1026 7.7035 16.8965 8.00539 16.5898 8.05504C16.284 8.10455 15.9959 7.89752 15.945 7.59229C15.9435 7.5841 15.9392 7.56208 15.9346 7.54131C15.9253 7.49978 15.9093 7.43391 15.8839 7.34679C15.8332 7.17254 15.745 6.91354 15.5987 6.59428C15.3063 5.95655 14.7805 5.07591 13.8521 4.14752C12.9237 3.21912 12.0431 2.69337 11.4054 2.401C11.0861 2.25463 10.8271 2.16648 10.6529 2.11573C10.5657 2.09036 10.4563 2.06522 10.4147 2.05597C10.1095 2.00511 9.89511 1.71566 9.94462 1.40987Z"
                                            fill="#888EA8"
                                        />
                                        <path
                                            fill-rule="evenodd"
                                            clip-rule="evenodd"
                                            d="M10.1143 3.99697C10.1996 3.69827 10.511 3.5253 10.8097 3.61065L10.6552 4.1515C10.8097 3.61065 10.8097 3.61065 10.8097 3.61065L10.8108 3.61096L10.8119 3.61129L10.8144 3.61202L10.8202 3.61375L10.8351 3.61838C10.8464 3.62199 10.8605 3.6267 10.8773 3.63268C10.911 3.64463 10.9555 3.66163 11.0102 3.68503C11.1194 3.73186 11.2687 3.80417 11.4521 3.91271C11.8192 4.12997 12.3203 4.49085 12.9091 5.07958C13.4978 5.66831 13.8587 6.16945 14.0759 6.53655C14.1845 6.71993 14.2568 6.86923 14.3036 6.97849C14.327 7.0331 14.344 7.07762 14.356 7.1113C14.3619 7.12814 14.3667 7.14226 14.3703 7.15357L14.3749 7.16841L14.3766 7.17422L14.3774 7.17672L14.3777 7.17787C14.3777 7.17787 14.378 7.17895 13.8371 7.33348L14.378 7.17895C14.4633 7.47766 14.2904 7.789 13.9917 7.87434C13.6955 7.95896 13.3869 7.78964 13.2985 7.4956L13.2957 7.48751C13.2917 7.47624 13.2835 7.45405 13.2696 7.42165C13.2418 7.3569 13.1915 7.25098 13.1078 7.10953C12.9406 6.82698 12.6385 6.40004 12.1136 5.87508C11.5886 5.35011 11.1617 5.04808 10.8791 4.88086C10.7377 4.79714 10.6317 4.74682 10.567 4.71907C10.5346 4.70518 10.5124 4.69691 10.5011 4.69291L10.493 4.69014C10.199 4.60173 10.0297 4.29314 10.1143 3.99697Z"
                                            fill="#888EA8"
                                        />
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="is_medical_practitioner">Are you a Medical Practitioner in this camp?</label>
                            <input id="is_medical_practitioner" name="role_medical" type="checkbox" class="form-checkbox" onchange="updateLabel(this)"  title="You can only select one option. Uncheck the others to select this." x-tooltip="You can only select one option. Uncheck the others to select this.">
                            <span id="medical_status" title="You can only select one option. Uncheck the other to select this." x-tooltip="You can only select one option. Uncheck the other to select this.">No</span>
                        </div>
                        <div>
                            <label for="is_workshop_practitioner">Are you a Workshop Practitioner in this camp?</label>
                            <input id="is_workshop_practitioner" name="role_workshop" type="checkbox" class="form-checkbox" onchange="updateLabel(this)"  title="You can only select one option. Uncheck the others to select this." x-tooltip="You can only select one option. Uncheck the others to select this.">
                            <span id="workshop_status" title="You can only select one option. Uncheck the other to select this." x-tooltip="You can only select one option. Uncheck the other to select this.">No</span>
                        </div>
                        
                    </div>
                    
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="Password">Password</label>
                            <div class="relative text-white-dark">
                                <input id="Password" name="password" type="password" placeholder="Enter Password" class="form-input ps-10 placeholder:text-white-dark" required/>
                                <span class="absolute start-4 top-1/2 -translate-y-1/2">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path opacity="0.5" d="M1.5 12C1.5 9.87868 1.5 8.81802 2.15901 8.15901C2.81802 7.5 3.87868 7.5 6 7.5H12C14.1213 7.5 15.182 7.5 15.841 8.15901C16.5 8.81802 16.5 9.87868 16.5 12C16.5 14.1213 16.5 15.182 15.841 15.841C15.182 16.5 14.1213 16.5 12 16.5H6C3.87868 16.5 2.81802 16.5 2.15901 15.841C1.5 15.182 1.5 14.1213 1.5 12Z" fill="currentColor" />
                                        <path d="M6 12.75C6.41421 12.75 6.75 12.4142 6.75 12C6.75 11.5858 6.41421 11.25 6 11.25C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75Z" fill="currentColor" />
                                        <path d="M9 12.75C9.41421 12.75 9.75 12.4142 9.75 12C9.75 11.5858 9.41421 11.25 9 11.25C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75Z" fill="currentColor" />
                                        <path d="M12.75 12C12.75 12.4142 12.4142 12.75 12 12.75C11.5858 12.75 11.25 12.4142 11.25 12C11.25 11.5858 11.5858 11.25 12 11.25C12.4142 11.25 12.75 11.5858 12.75 12Z" fill="currentColor" />
                                        <path d="M5.0625 6C5.0625 3.82538 6.82538 2.0625 9 2.0625C11.1746 2.0625 12.9375 3.82538 12.9375 6V7.50268C13.363 7.50665 13.7351 7.51651 14.0625 7.54096V6C14.0625 3.20406 11.7959 0.9375 9 0.9375C6.20406 0.9375 3.9375 3.20406 3.9375 6V7.54096C4.26488 7.51651 4.63698 7.50665 5.0625 7.50268V6Z" fill="currentColor" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <div>
                            <label for="Password">Confirm Password</label>
                            <div class="relative text-white-dark">
                                <input id="ConfirmPassword" name="confirm_password" type="password" placeholder="Enter Password" class="form-input ps-10 placeholder:text-white-dark" required/>
                                <span class="absolute start-4 top-1/2 -translate-y-1/2">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path opacity="0.5" d="M1.5 12C1.5 9.87868 1.5 8.81802 2.15901 8.15901C2.81802 7.5 3.87868 7.5 6 7.5H12C14.1213 7.5 15.182 7.5 15.841 8.15901C16.5 8.81802 16.5 9.87868 16.5 12C16.5 14.1213 16.5 15.182 15.841 15.841C15.182 16.5 14.1213 16.5 12 16.5H6C3.87868 16.5 2.81802 16.5 2.15901 15.841C1.5 15.182 1.5 14.1213 1.5 12Z" fill="currentColor" />
                                        <path d="M6 12.75C6.41421 12.75 6.75 12.4142 6.75 12C6.75 11.5858 6.41421 11.25 6 11.25C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75Z" fill="currentColor" />
                                        <path d="M9 12.75C9.41421 12.75 9.75 12.4142 9.75 12C9.75 11.5858 9.41421 11.25 9 11.25C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75Z" fill="currentColor" />
                                        <path d="M12.75 12C12.75 12.4142 12.4142 12.75 12 12.75C11.5858 12.75 11.25 12.4142 11.25 12C11.25 11.5858 11.5858 11.25 12 11.25C12.4142 11.25 12.75 11.5858 12.75 12Z" fill="currentColor" />
                                        <path d="M5.0625 6C5.0625 3.82538 6.82538 2.0625 9 2.0625C11.1746 2.0625 12.9375 3.82538 12.9375 6V7.50268C13.363 7.50665 13.7351 7.51651 14.0625 7.54096V6C14.0625 3.20406 11.7959 0.9375 9 0.9375C6.20406 0.9375 3.9375 3.20406 3.9375 6V7.54096C4.26488 7.51651 4.63698 7.50665 5.0625 7.50268V6Z" fill="currentColor" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                        <div>
                            <label class="flex cursor-pointer items-center">
                                <input type="checkbox" class="form-checkbox bg-white dark:bg-black" required/>
                                <span class="text-white-dark">I have read and understood the 
                                    {% include "backend/apps/documents/TermsAndPolicy.html" %}
                                </span>
                            </label>
                        </div>
                        <button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
                            Sign Up
                        </button>
                    </form>
                    {% else %}
                    <br />
                    <div class="text-center dark:text-white">
                        Both Privacy Policy and Terms & Conditions needed to continue!
                    </div>
                    {% endif %}
                    <br />
                    <div class="text-center dark:text-white">
                        Already have an account ?
                        <a href="{% url "auth_signin" %}" class="uppercase text-primary underline transition hover:text-black dark:hover:text-white" >SIGN IN</a >
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const medicalPractitioner = document.getElementById('is_medical_practitioner');
        const workshopPractitioner = document.getElementById('is_workshop_practitioner');
        const partnerPractitioner = document.getElementById('is_partner');

        // Function to update status text
        function updateStatusText() {
            document.getElementById('medical_status').textContent = medicalPractitioner.checked ? 'Yes' : 'No';
            document.getElementById('workshop_status').textContent = workshopPractitioner.checked ? 'Yes' : 'No';
            document.getElementById('partner_status').textContent = partnerPractitioner.checked ? 'Yes' : 'No';
        }

        // Function to uncheck and disable others when one is checked
        function handleCheckboxChange(checkedCheckbox) {
            const checkboxes = [medicalPractitioner, workshopPractitioner, partnerPractitioner];
            checkboxes.forEach((checkbox) => {
                if (checkbox !== checkedCheckbox) {
                    checkbox.checked = false; // Uncheck other checkboxes
                    checkbox.disabled = checkedCheckbox.checked; // Disable others if the current one is checked
                }
            });
            updateStatusText(); // Update status text based on current selections
        }

        // Add change event listeners
        medicalPractitioner.addEventListener('change', function () {
            handleCheckboxChange(this);
        });

        workshopPractitioner.addEventListener('change', function () {
            handleCheckboxChange(this);
        });

        partnerPractitioner.addEventListener('change', function () {
            handleCheckboxChange(this);
        });

        // Function to validate phone format
        function validatePhoneNumber(phone) {
            const phoneRegex = /^\+\d{1,3}\d{9}$/; // General regex for +countrycode followed by 9 digits
            return phoneRegex.test(phone);
        }

        // Form validation before submission
        function validateForm(event) {
            const phoneInput = document.getElementById('phone').value;
            const medicalPractitionerChecked = medicalPractitioner.checked;
            const workshopPractitionerChecked = workshopPractitioner.checked;
            const partnerPractitionerChecked = partnerPractitioner.checked;

            // Validate phone format
            if (!validatePhoneNumber(phoneInput)) {
                event.preventDefault(); // Prevent form submission
                alert('Phone number must be in the format +country_codeXXXXXXXX (e.g., +254712345678).');
                return false;
            }

            // Check if at least one role is selected
            if (!medicalPractitionerChecked && !workshopPractitionerChecked && !partnerPractitionerChecked) {
                event.preventDefault(); // Prevent form submission
                alert('Please select at least one option: Medical Practitioner, Workshop Practitioner, or Partner.');
                return false;
            }
            return true;
        }

        // Add submit event listener to the form
        const form = document.querySelector('form');
        form.addEventListener('submit', validateForm);
    });

    // Function to update the status label based on checkbox state
    function updateLabel(checkbox) {
        const statusId = checkbox.id === 'is_medical_practitioner' ? 'medical_status' :
                         checkbox.id === 'is_workshop_practitioner' ? 'workshop_status' :
                         'partner_status'; // This ensures that partner_status is only updated for the Partner checkbox
        const statusElement = document.getElementById(statusId);
        statusElement.textContent = checkbox.checked ? 'Yes' : 'No';
    }
</script>


{% endblock %}