{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Osina</title>

    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- INTERNATIONAL PHONE NUMBER INPUT TAG -->
    <script src="https://unpkg.com/libphonenumber-js/bundle/libphonenumber-js.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
</head>


<body class="font-poppinsLight">
    <div class="w-full h-fit xlg1:h-[100vh] grid grid-cols-1 xlg1:grid-cols-2 gap-5">
        <!-- SIDE BANNER -->
        <div
            class="bg-gradient-to-b from-gray-100 to-blue-950 p-5 s:p-9 overflow-hidden w-full h-full border-r border-gray-100 duration-500 hidden xlg1:block relative">
            <div class="relative w-full h-full flex justify-center items-center">
                <div
                    class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
                <div
                    class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
                <div
                    class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
                <div
                    class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
            </div>


            <div class="absolute w-full h-full hidden xlg1:flex justify-between items-center m-auto inset-0 z-10 p-9">
                <div class="flex flex-col">
                    <p class="text-white text-[35px] xxlg:text-[45px] xxl:text-[70px] font-poppinsExtraBold duration-500">
                        PROVIDING
                        OPTIMAL
                        <br />SOLUTIONS<br />
                    </p>
                    <div class="flex justify-start items-center gap-2 mt-5">
                        <div class="w-[30px] h-[3px] bg-blue-500"></div>
                        <img src="{% static 'images/ositcom_logos/ositcomwhite.png' %}" class="w-[100px] xxlg:w-[120px] h-auto">
                    </div>
                </div>
                <div class="absolute w-[400px] xxlg:w-[480px] xxl:w-[550px] h-auto -right-40 bottom-5 animate-bouncePop">
                    <img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" class="w-full h-auto">
                </div>
            </div>
        </div>


        <!-- LOGIN/REGISTRATION -->
        <div class="w-full h-[100vh] xlg1:h-full flex justify-center py-9 px-0 s:px-5 relative overflow-hidden xlg1:overflow-visible bg-gradient-to-b from-gray-100 to-blue-950 xlg1:from-white xlg1:to-white" id="loginRegisterContainer">

            <!-- Background blobs -->
            <div class="relative w-full flex justify-center items-center">
                <div
                    class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
                </div>
                <div
                    class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
                </div>
                <div
                    class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
                </div>
                <div
                    class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
                </div>


                <!-- LOGIN FORM -->
                <form id="loginForm" method="POST"href="{% url 'signin' %}?next={{ next_page }}"
                    class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">
                    {% csrf_token %}

                    <!-- OSINA LOGO ON DESKTOP -->
                    <img src="{% static 'images/ositcom_logos/osinablue.png' %}" class="w-[200px] xxlg:w-[250px] h-auto hidden xlg1:block">

                    <!-- OSINA LOGO ON MOBILE -->
                    <img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[200px] h-auto block xlg1:hidden">

                    <div class="w-full flex justify-center items-center px-5 s:px-0">
                        <div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
                            <div
                                class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
                                <button
                                    class="w-[50%] h-full bg-white rounded-md p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
                                    style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);"
                                    type="button">
                                    Login
                                </button>
                                <button class="w-[50%] h-full p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
                                    id="loginToRegisterButton" type="button">
                                    Register
                                </button>
                            </div>

                            <div class="mt-5 w-full flex flex-col gap-3">
                                <!-- LOGIN ERROR MESSAGE -->
                                <div id="error-message"
                                    class="messages opacity-0 absolute top-20 w-[85%] s:w-fit left-0 right-0 mx-auto px-9 s:px-14 py-3 rounded-md bg-red-500 bg-opacity-80 text-white text-center rounded-t-md shadow-md text-xl z-10 pointer-events-none">
                                    {% for message in messages %}
                                    {% if message.tags %}
                                    <p
                                        class="{{ message.tags }} text-white text-base s:text-[17px] font-light text-center">
                                        {{ message }}</p>
                                    {% endif %}
                                    {% endfor %}
                                </div>

                                <input name="username" id="emailInput"
                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
                                    placeholder="Email" required>

                                <div class="w-full h-fit relative">
                                    <input name="password" id="passwordInput" type="password"
                                        class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
                                        placeholder="Password" id="passwordInput" required>
                                    <div class="absolute top-[14px] right-3 text-[20px] text-gray-500 cursor-pointer"
                                        id="showPasswordButton">
                                        <i class="fa fa-eye"></i>
                                    </div>
                                </div>

                                <a href="{% url 'forgot-password' %}" class="text-gray-500 hover:text-osiblue duration-300 cursor-pointer">Forgot Your
                                    Password?</a>

                                <button type="submit"
                                    class="w-full bg-osiblue text-white rounded-md px-3 py-2 mt-5 border border-osiblue hover:bg-transparent hover:text-osiblue cursor-pointer duration-300 text-xl">
                                    Login
                                </button>
                            </div>
                        </div>
                    </div>
                </form>


                <!-- REGISTER FORM -->
                <form id="registerForm" style="display: none;" method="POST" action="{% url 'signup' %}"
                    class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">
                    {% csrf_token %}

                    <!-- OSINA LOGO ON DESKTOP -->
                    <img src="{% static 'images/ositcom_logos/osinablue.png' %}" class="w-[200px] xxlg:w-[250px] h-auto hidden xlg1:block">

                    <!-- OSINA LOGO ON MOBILE -->
                    <img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[200px] h-auto block xlg1:hidden">

                    <div class="w-full h-fit flex justify-center items-center px-5 s:px-0">
                        <div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
                            <div
                                class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
                                <button class="w-[50%] h-full p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
                                    id="registerToLoginButton" type="button">
                                    Login
                                </button>
                                <button
                                    class="w-[50%] h-full bg-white rounded-md p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
                                    type="button"
                                    style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">
                                    Register
                                </button>
                            </div>

                            <!-- REGISTARTION ERROR MESSAGE -->
                            <div id="register-error-message"
                                class="opacity-0 absolute top-10 w-[85%] s:w-fit left-0 right-0 mx-auto px-9 s:px-14 py-3 rounded-md bg-red-500 bg-opacity-80 text-white text-center rounded-t-md shadow-md text-xl z-10 pointer-events-none">
                                <p>Please Fill Out All The Fields</p>
                            </div>

                            <div class="mt-5 w-full flex flex-col gap-3">
                                <div class="w-full py-1">
                                    <p class="text-red-500 text-center font-light hidden" id="registrationErrorMessage">
                                        Please fill out all the fields.</p>
                                </div>

                                <input type="text" placeholder="Username" name="username" id="username"
                                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4 hidden"
                                    required>

                                <input type="text" name="first_name"
                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
                                    placeholder="First Name" required>

                                <input type="text" name="last_name"
                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
                                    placeholder="Last Name" required>

                                <input type="email" id="emailAddressInput" name="email"
                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
                                    placeholder="Email" required>

                                <p class="text-red-500 font-light text-sm" id="emailError"></p>


                                <input type="number" id="phone" name="mobile_number"
                                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none"
                                    placeholder="Mobile Number" required>

                                <input type="password" name="password1"
                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
                                    placeholder="Password" required>

                                <input type="password" name="password2"
                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
                                    placeholder="Password Confirmation" required>

                                <p class="text-red-500 font-light text-sm" id="passwordError"></p>

                                <div class="w-full flex justify-start items-center gap-3 mt-5">
                                    <input type="checkbox" name="" id="" required>
                                    <p class="text-gray-500 text-sm s:text-base">
                                        I agree to OSINA's <a
                                            class="text-osiblue cursor-pointer hover:text-gray-500">Terms
                                            &
                                            Conditions</a> and <a
                                            class="text-osiblue cursor-pointer hover:text-gray-500">Privacy
                                            Policy</a>
                                    </p>
                                </div>

                                <button
                                    class="w-full bg-osiblue text-white rounded-md px-3 py-2 mt-3 border border-osiblue hover:bg-transparent hover:text-osiblue cursor-pointer duration-300 text-[20px]"
                                    type="submit" id="openOtpModalButton">
                                    Register
                                </button>


                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-------------- JS SCRIPTS --------------->

    <!-- Include the intl-tel-input JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
    <script src='{% static "js/login_register/international-mobile-input-tag.js" %}'></script>

    <script src='{% static "js/login_register/login-register.js" %}'></script>

    <script src='{% static "js/login_register/registration.js" %}'></script>
</body>

</html>