@extends('layouts.app')
@section('title', 'Register as Seller')
@section('content')

    <section class="min-h-screen w-screen bg-cover bg-center bg-no-repeat flex items-center justify-center font-futurabk"
        style="background-image: url('{{ asset('front/images/login_bg.png') }}');">
        <div class="bg-[#FAFBF7] w-1/3 p-10 rounded-[2.5rem] shadow-lg">

            <!-- Logo -->
            <div class="flex justify-center mb-8">
                <img src="{{ asset($helper->logo()) }}" alt="Harvest Hub" class="h-full">
            </div>

            <h2 class="text-center">Sign Up Your Seller Account</h2>



            <form id="msform" method="POST" action="{{ route('register.vendor') }}" enctype="multipart/form-data">
                @csrf
                <!-- progressbar -->
                <ul id="progressbar">
                    <li class="active" id="stepOne" data-fieldset="fieldset-stepOne"><strong>Step 1</strong></li>
                    <li id="stepTwo" data-fieldset="fieldset-stepTwo"><strong>Step 2</strong></li>
                    <li id="stepThree" data-fieldset="fieldset-stepThree"><strong>Step 3</strong></li>
                    <li id="stepFour" data-fieldset="fieldset-stepFour"><strong>Step 4</strong></li>
                    <li id="stepFive" data-fieldset="fieldset-stepFive"><strong>Step 5</strong></li>
                </ul>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div> <br> <!-- fieldsets -->
                <fieldset id="fieldset-stepOne">
                    <div class="form-card">
                        <div class="row">
                            <div class="col-7">
                                <h2 class="f text-center">Grow your business</h2>
                            </div>
                        </div>
                        <label class="fieldlabels">What Is Your Email Address? <span class="text-[#f00]"><span
                                    class="text-[#f00]">*</span></span> </label>
                        <input type="email" name="email" placeholder="Email Address"
                            value="{{ Auth::check() ? Auth::user()->email : '' }}" required />
                        <label class="fieldlabels">Password <span class="text-[#f00]">*</span></label>
                        <div class="relative">
                            <input type="password" id="password" name="password" placeholder="Password" required />
                            <button class="absolute right-3 top-[30px] -translate-y-1/2" type="button"
                                onclick="showPassword('password', this)">
                                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z"
                                        stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path
                                        d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z"
                                        stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>

                        <label class="fieldlabels">Confirm Password<span class="text-[#f00]">*</span></label>
                        <div id="confirm-password-wrapper" class="relative">
                            <input type="password" id="password_confirmation" name="password_confirmation"
                                placeholder="Password" required />
                            <button class="absolute right-3 top-[30px]" type="button"
                                onclick="showPassword('password_confirmation', this)">
                                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z"
                                        stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path
                                        d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z"
                                        stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                        <label class="fieldlabels">What's a link to your social media profile that tells us most about your
                            business? <span class="text-[#f00]">*</span></label>
                        <input type="text" name="meta[social_profile]" placeholder="Type Your Answer Here" required />
                        <label class="fieldlabels">What is your Phone Number? <span class="text-[#f00]">*</span></label>
                        <input type="number" name="meta[phone]"
                            value="{{ Auth::check() ? Auth::user()->getMeta('phone') : '' }}" placeholder="Phone Number"
                            required />
                        <label class="fieldlabels">Can we text you about your application? You will always be provided an
                            opt out option. <span class="text-[#f00]">*</span></label>
                        <div class="text-center flex flex-wrap justify-start">
                            <div class="flex items-center mr-4 mb-4">
                                <input id="radio1" type="radio" name="meta[text_application]"
                                    class="hidden ctRadio" checked required value="Yes" />
                                <label for="radio1" class="flex items-center cursor-pointer ctLabel">
                                    <span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                    Yes</label>
                            </div>
                            <div class="flex items-center mr-4 mb-4">
                                <input id="radio2" type="radio" name="meta[text_application]"
                                    class="hidden ctRadio" required value="No" />
                                <label for="radio2" class="flex items-center cursor-pointer ctLabel">
                                    <span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                    No</label>
                            </div>

                        </div>

                        <label class="fieldlabels">How did you hear about us?</label>
                        <div class="text-center flex flex-wrap justify-start">
                            <div class="flex items-center mr-4 mb-4">
                                <input id="soc_media" type="radio" name="meta[how_do_heared_about_us]"
                                    class="hidden ctRadio source-radio" checked value="Social Media" />
                                <label for="soc_media" class="flex items-center cursor-pointer ctLabel">
                                    <span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                    Social Media</label>
                            </div>
                            <div class="flex items-center mr-4 mb-4">
                                <input id="another_brand" type="radio" name="meta[how_do_heared_about_us]"
                                    class="hidden ctRadio source-radio" value="Another Brand" />
                                <label for="another_brand" class="flex items-center cursor-pointer ctLabel">
                                    <span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                    Another Brand</label>
                            </div>
                            <div class="flex items-center mr-4 mb-4">
                                <input id="friend" type="radio" name="meta[how_do_heared_about_us]"
                                    class="hidden ctRadio source-radio" value="Friend/Family" />
                                <label for="friend" class="flex items-center cursor-pointer ctLabel">
                                    <span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                    Friend/Family</label>
                            </div>
                            <div class="flex items-center mr-4 mb-4">
                                <input id="google" type="radio" name="meta[how_do_heared_about_us]"
                                    class="hidden ctRadio source-radio" value="Google Search" />
                                <label for="google" class="flex items-center cursor-pointer ctLabel">
                                    <span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                    Google Search</label>
                            </div>
                            <div class="flex flex-col mr-4 mb-4">
                                <div class="flex items-center">
                                    <input id="other" type="radio" name="meta[how_do_heared_about_us]"
                                        class="hidden ctRadio source-radio" value="Other" />
                                    <label for="other" class="flex items-center cursor-pointer ctLabel">
                                        <span
                                            class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                        Other</label>
                                </div>
                                <input type="text" id="other_source_input" name="meta[how_do_heared_about_us_other]"
                                    placeholder="Please specify"
                                    class="hidden mt-2 p-2 border border-gray-300 rounded-lg w-full" />
                            </div>

                        </div>
                    </div>
                    <input type="button" name="next" class="next action-button" value="Next" />
                </fieldset>
                <fieldset id="fieldset-stepTwo">
                    <div class="form-card">
                        <div class="row">
                            <div class="col-7">
                                <h2 class="fs-title">Tell us a little about yourself! This question is required.<span
                                        class="text-[#f00]">*</span></h2>
                            </div>
                        </div>
                        <label class="fieldlabels">What is your First and Last Name? <span
                                class="text-[#f00]">*</span></label>
                        <input type="text" name="name" placeholder="Name" required />
                        {{-- <label class="fieldlabels">What is your Last Name? <span class="text-[#f00]">*</span></label>
                        <input type="text" name="lname" placeholder="Last Name" required /> --}}

                        <label class="fieldlabels">What is your business name? <span class="text-[#f00]">*</span></label>
                        <input type="text" name="meta[busniess_name]" placeholder="Business Name" required />

                        <label class="fieldlabels">What is the name of your store? <span
                                class="text-[#f00]">*</span></label>
                        <input type="text" name="meta[store_name]" placeholder="Store Name" required />
                        <div class="flex items-center">
                            <input type="checkbox" id="sameasbusniess"
                                class="bg-white border-gray-300 rounded accent-[#014C26] focus:ring-[#014C26] focus:ring-2 !w-auto !m-0">
                            <label for="sameasbusniess" class="ms-2 text-sm font-medium text-gray-900">
                                Same as busniess name
                            </label>
                        </div>
                        <label class="fieldlabels">What is your business website? <span
                                class="text-[#f00]">*</span></label>
                        <input type="text" name="meta[website]" placeholder="Business Website" required />
                        <label class="fieldlabels">What is your Zip Code? <span class="text-[#f00]">*</span></label>
                        <input type="number" name="meta[zip]" placeholder="Zip Code" required />
                    </div>
                    <input type="button" name="next" class="next action-button" value="Next" />
                    <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                </fieldset>
                <fieldset id="fieldset-stepThree">
                    <div class="form-card">
                        <div class="row">
                            <div class="col-7">
                                <h2 class="fs-title">Which of the following categories do you plan to sell in?This question
                                    is required.</h2>
                                <p>Select one primary category. If you are interested in multiple categories, please do not
                                    reapply separately, simply let us know at the end and we will discuss it when we contact
                                    you.</p>
                            </div>
                        </div>
                        <div class="text-center flex flex-wrap justify-start mt-10">

                            @foreach (['Plants', 'Freshwaters', 'Garden Supplies', 'Produce', 'Seeds', 'Specialty Food Products', 'Others'] as $key => $item)
                                <div class="flex flex-col mr-4 mb-4 flex-[45%]">
                                    <div class="flex items-center w-full">
                                        <input id="radio_{{ strtolower(str_replace(' ', '_', $item)) }}" type="radio"
                                            name="meta[category]" class="hidden ctRadio category-radio"
                                            {{ $key == 0 ? 'checked' : '' }} value="{{ $item }}" required />
                                        <label for="radio_{{ strtolower(str_replace(' ', '_', $item)) }}"
                                            class="flex items-center cursor-pointer ctLabel">
                                            <span
                                                class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                            {{ $item }}</label>
                                    </div>
                                    @if ($item == 'Others')
                                        <input type="text" id="other_category_input" name="meta[other_category]"
                                            placeholder="Please specify what you are selling"
                                            class="hidden mt-2 p-2 border border-gray-300 rounded-lg w-full" />
                                    @endif
                                </div>
                            @endforeach


                        </div>
                    </div>
                    <input type="button" name="next" class="next action-button" value="Submit" />
                    <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                </fieldset>
                <fieldset id="fieldset-stepFour">
                    <div class="form-card">
                        <div class="row">
                            <div class="col-7">
                                <h2 class="f text-center">Let's hear about your selling experience!<span
                                        class="text-[#f00]">*</span></h2>
                            </div>
                        </div>

                        <label class="fieldlabels">How long have you been selling products?</label>
                        <div class="text-center flex flex-wrap justify-start">
                            <div class="flex items-center mb-4 flex-[30%]">
                                <input id="ex1" type="radio" name="meta[experience]" class="hidden ctRadio"
                                    value="Less than 1 year" checked />
                                <label for="ex1" class="flex items-center cursor-pointer ctLabel">
                                    <span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                    Less than 1 year</label>
                            </div>
                            <div class="flex items-center mb-4 flex-[30%]">
                                <input id="ex2" type="radio" name="meta[experience]" class="hidden ctRadio"
                                    value="1-3 years" />
                                <label for="ex2" class="flex items-center cursor-pointer ctLabel">
                                    <span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                    1-3 years</label>
                            </div>
                            <div class="flex items-center mb-4 flex-[30%]">
                                <input id="ex3" type="radio" name="meta[experience]" class="hidden ctRadio" />
                                <label for="ex3" class="flex items-center cursor-pointer ctLabel">
                                    <span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                    More than 3 years</label>
                            </div>
                            <label class="fieldlabels">How many packages do you ship per week on average? <span
                                    class="text-[#f00]">*</span></label>
                            <input type="number" name="meta[package_week]" placeholder="Type Your Answer Here"
                                value="0" required />

                            <label class="fieldlabels">Do you need help with shipping supplies?<span
                                    class="text-[#f00]">*</span></label>

                            <div class="text-center flex flex-wrap justify-start ml-5">
                                <div class="flex items-center mr-4 mb-4">
                                    <input id="need_shipping_supplies_yes" type="radio"
                                        name="meta[need_shipping_supplies]" class="hidden ctRadio" checked required
                                        value="Yes" />
                                    <label for="need_shipping_supplies_yes"
                                        class="flex items-center cursor-pointer ctLabel">
                                        <span
                                            class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                        Yes</label>
                                </div>
                                <div class="flex items-center mr-4 mb-4">
                                    <input id="need_shipping_supplies_no" type="radio"
                                        name="meta[need_shipping_supplies]" class="hidden ctRadio" required
                                        value="No" />
                                    <label for="need_shipping_supplies_no"
                                        class="flex items-center cursor-pointer ctLabel">
                                        <span
                                            class="w-4 h-4 inline-block mr-1 rounded-full border border-grey ctSpan"></span>
                                        No</label>
                                </div>

                            </div>

                            <label class="fieldlabels">What is the average item value in USD? <span
                                    class="text-[#f00]">*</span></label>
                            <input type="number" name="meta[avg_item_value_in_usd]" placeholder="Type Your Answer Here"
                                required />
                            <label class="fieldlabels">What type of seller are you?<span
                                    class="text-[#f00]">*</span></label>
                            <select id="typeseller" name="meta[seller_type]">
                                <option value="individual">Individual or sole proprietorship</option>
                                <option value="business">Incorporated business</option>
                            </select>

                            <div id="individual-fields" class="w-full">
                                <label class="fieldlabels">Social Security Number (SSN)<span
                                        class="text-[#f00]">*</span></label>
                                <input type="text" name="meta[ssn]" placeholder="XXX-XX-XXXX" required>
                            </div>
                            <div id="business-fields" class="w-full hidden">
                                <label class="fieldlabels">Employer Identification Number (EIN)<span
                                        class="text-[#f00]">*</span></label>
                                <input type="text" name="meta[ein]" placeholder="XX-XXXXXXX">
                            </div>




                        </div>
                    </div>
                    <input type="button" name="next" class="next action-button" value="Next" />
                    <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                </fieldset>
                <fieldset id="fieldset-stepFifth">
                    <div class="form-card">
                        <label class="fieldlabels">Is there anything else we should know that you weren't able to share in
                            this application?</label>
                        <textarea name="meta[extra_details]"></textarea>

                        <label class="fieldlabels">Select Package<span class="required">*</span></label>
                        <select id="package_type" name="package_type" required>
                            <option value="">Select a package</option>
                            @foreach ($packages as $item)
                                <option value="{{ $item->id }}">{{ $item->name }} -- ${{ $item->monthly_fee }}
                                </option>
                            @endforeach

                        </select>

                        <label class="fieldlabels">Card Number<span class="required">*</span></label>
                        <div id="card-element" class="StripeElement"></div>
                        <div id="card-errors" role="alert" class="text-red-500 mt-2"></div>

                        <input type="submit" class="action-button" value="Submit" />
                        <input type="button" name="previous" class="previous action-button-previous"
                            value="Previous" />





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


        </div>
    </section>





    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://js.stripe.com/v3/"></script>


    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FFDD0F',
                        secondary: '#014C26',
                        redSecondary: '#FF2F39',
                        textColor: '#3A3636',
                        priceColor: '#7E8983'
                    },
                    fontFamily: {
                        nunito: 'Nunito',
                        futura: 'Futura',
                        futurabk: 'Futura Bk BT'
                    },
                },
                container: {
                    center: true,
                    screens: {
                        xs: '576px',
                        sm: '768px',
                        md: '992px',
                        lg: '1200px',
                        xl: '1320px',
                        xxl: '1560px'
                    }
                }
            }
        }

        var stripe = Stripe('{{ config('services.stripe.key') }}');

        var elements = stripe.elements();
        var style = {
            base: {
                color: '#32325d',
                lineHeight: '18px',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };



        var card = elements.create('card', {
            style: style
        });
        card.mount('#card-element');

        card.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                $(displayError).show();
                displayError.textContent = event.error.message;
            } else {
                $(displayError).hide();
                displayError.textContent = '';
            }
        });





        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('input[name="meta[busniess_name]"], #sameasbusniess').forEach(element => {
                element.addEventListener('change', function() {
                    const storeInput = document.querySelector('input[name="meta[store_name]"]');
                    const businessInput = document.querySelector(
                        'input[name="meta[busniess_name]"]');
                    const checkbox = document.getElementById('sameasbusniess');
                    if (checkbox.checked) {
                        storeInput.value = businessInput.value;
                    } else {
                        storeInput.value = '';
                    }
                });
            });
            const typesellerSelect = document.getElementById('typeseller');
            const individualFields = document.getElementById('individual-fields');
            const businessFields = document.getElementById('business-fields');
            typesellerSelect.addEventListener('change', function() {
                if (this.value === 'individual') {
                    individualFields.classList.remove('hidden');
                    businessFields.classList.add('hidden');
                    individualFields.querySelector('input').required = true;
                    businessFields.querySelector('input').required = false;
                } else {
                    individualFields.classList.add('hidden');
                    businessFields.classList.remove('hidden');
                    individualFields.querySelector('input').required = false;
                    businessFields.querySelector('input').required = true;
                }
            });

            // Toggle "Other" source input
            const sourceRadios = document.querySelectorAll('.source-radio');
            const otherSourceInput = document.getElementById('other_source_input');

            sourceRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.id === 'other' && this.checked) {
                        otherSourceInput.classList.remove('hidden');
                        otherSourceInput.required = true;
                    } else {
                        otherSourceInput.classList.add('hidden');
                        otherSourceInput.required = false;
                        otherSourceInput.value = '';
                    }
                });
            });

            // Toggle "Others" category input
            const categoryRadios = document.querySelectorAll('.category-radio');
            const otherCategoryInput = document.getElementById('other_category_input');

            categoryRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.value === 'Others' && this.checked) {
                        otherCategoryInput.classList.remove('hidden');
                        otherCategoryInput.required = true;
                    } else {
                        otherCategoryInput.classList.add('hidden');
                        otherCategoryInput.required = false;
                        otherCategoryInput.value = '';
                    }
                });
            });

            const password = document.getElementById("password");
            const confirmPassword = document.getElementById("password_confirmation");

            function validatePasswords() {
                // Clear previous mismatch error
                const existingError = document.getElementById('password-match-error');
                if (existingError) existingError.remove();
                confirmPassword.classList.remove('border-red-500');

                if (password.value && confirmPassword.value) {
                    if (password.value !== confirmPassword.value) {
                        confirmPassword.classList.add('border-red-500');
                        const errorLabel = document.createElement('div');
                        errorLabel.id = 'password-match-error';
                        errorLabel.className = 'text-red-500 error-text text-base font-bold mt-1 mb-2';
                        errorLabel.innerText = 'Passwords do not match!';
                        document.getElementById('confirm-password-wrapper').after(errorLabel);

                        // Show toast if they don't match
                        $.toast({
                            heading: 'Error',
                            text: 'Passwords do not match!',
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'error',
                            hideAfter: 3000,
                            stack: 6
                        });
                    }
                }
            }

            // Listen on blur or input depending on when you want validation
            confirmPassword.addEventListener("blur", validatePasswords);
            // Trigger change on page load if needed
            // select.dispatchEvent(new Event('change'));
        });

        document.getElementById('msform').addEventListener('submit', function(event) {
            event.preventDefault();
            var form = this;

            // Validate the final step
            if (checkForAllRequiredValues('fieldset-stepFifth')) {
                toastrShow('Alert', 'Please fill all required values correctly', 'error');
                return false;
            }

            var submitButton = form.querySelector('input[type="submit"]');
            if (submitButton) {
                submitButton.disabled = true;
                submitButton.value = 'Processing...';
            }

            var extraDetails = {
                address_zip: form.querySelector('input[name="meta[zip]"]').value
            };

            stripe.createToken(card, extraDetails).then(function(result) {
                if (result.error) {
                    var errorElement = document.getElementById('card-errors');
                    var submitButton = form.querySelector('input[type="submit"]');
                    if (errorElement) {
                        errorElement.textContent = result.error.message;
                        errorElement.style.display = 'block';
                    }

                    if (submitButton) {
                        submitButton.disabled = false;
                        submitButton.value = 'Submit';
                    }
                } else {
                    console.log('Token created:', result.token);
                    var hiddenInput = document.createElement('input');
                    hiddenInput.setAttribute('type', 'hidden');
                    hiddenInput.setAttribute('name', 'stripeToken');
                    hiddenInput.setAttribute('value', result.token.id);
                    form.appendChild(hiddenInput);

                    form.submit();
                }

            })

        });

        function showPassword(inputId, button) {
            const passwordInput = document.getElementById(inputId);
            if (passwordInput.getAttribute("type") === "password") {
                passwordInput.setAttribute("type", "text");
                button.innerHTML = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
                    <path d="M2 2L22 22" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M6.71277 6.7226C3.66479 8.79527 2 12 2 12C2 12 5.63636 19 12 19C14.0503 19 15.8174 18.2734 17.2711 17.2884M11 5.05822C11.3254 5.02013 11.6588 5 12 5C18.3636 5 22 12 22 12C22 12 21.3082 13.3317 20 14.8335" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M14 14.2362C13.4692 14.7112 12.7684 15.0001 12 15.0001C10.3431 15.0001 9 13.657 9 12.0001C9 11.1764 9.33193 10.4303 9.86932 9.88818" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>`;
            } else {
                passwordInput.setAttribute("type", "password");
                button.innerHTML = `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>`;
            }
        }
    </script>

@endsection