@extends('frontend.layouts.app')
@section('title', 'Register')
@section('content')
@php
use Illuminate\Support\Facades\Cookie;
@endphp
@push('style')
<style>
    .show-password,
    .shows-password {
        cursor: pointer;
        /* position: absolute;
    top: 0; */
        right: 25px;
        color: black !important;
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }


    @media screen and (max-width:1300px) {
        .show-password {
            top: -10px !important;
        }

        .shows-password {
            top: -10px;
        }
    }

    .form-select-reg {
        display: block;
        width: 100%;
        padding: 0.375rem 2.25rem 0.375rem 0.75rem;
        -moz-padding-start: calc(0.75rem - 3px);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .opt {
        color: black;
        background: #ebf1fa;
        height: 50px;
        /* background-color:rgba(var(--primary-rgba),0.4); */
    }

    .signup-select {
        max-width: 380px;
        width: 100%;
    }

    /* .row {
        display: flex;
        gap: 20px;
        margin-bottom: 15px;
    } */
    .input-field {
        flex: 1;
        display: flex;
        align-items: center;
        position: relative;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
    }
    .input-field svg {
        margin-right: 10px;
    }
    .input-field input,
    .input-field select {
        width: 100%;
        border: none;
        outline: none;
        background-color: transparent;
    }
    @media screen and (max-width:500px) {
        .signin-signup {
            overflow-y: scroll;
            height: 410px;
        }
    }
</style>
@endpush
<!-- <section class="login-sec">
    <div class="containers">
        <div class="row">
            <div class="col-lg-6">
                <div class="login-box">
                    <h3 class="text-primary">{{ __('Sign Up') }}</h3>
                    @if (session()->has('status'))
                        <div class="alert alert-success" role="alert">
                            {{ __('A verification link has been sent to your email address.') }}
                        </div>
                    @endif
                    @include('common.alert')
                    <form method="POST" action="{{ route('fe.register') }}">
                        @csrf
                        <div class="form-group">
                            <label for="inputFullName">Full Name</label>
                            <input id="inputFullName" type="text" placeholder="Full Name" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name">
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <br/>
                        <div class="form-group">
                            <label for="inputEmail">Email address</label>
                            <input id="inputEmail" type="email" placeholder="Enter email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <br/>
                        <div class="form-group">
                            <label for="inputPassword">Password</label>
                            <input id="inputPassword" type="password" placeholder="Password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="password">

                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <br/>
                        <div class="form-group">
                            <label for="inputConfirmPassword">Confirm Password</label>
                            <input id="inputConfirmPassword" type="password" placeholder="Password" class="form-control @error('password_confirmation') is-invalid @enderror" name="password_confirmation" required autocomplete="password_confirmation">

                            @error('password_confirmation')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group form-check">
                                    <input type="checkbox" name="terms" value="1" class="form-check-input" id="terms" required>
                                    <label class="form-check-label" for="terms"><a href="https://stagingnaxeva.online/terms-and-condition.html" class="text-primary">Terms and Conditions</a></label>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Sign Up</button>
                    </form>

                    <div class="social-btn">
                        <span>Or Sign up with Social</span>
                        <div class="col-md-auto ">
                            <a href="{{ route('fe.auth.redirect', 'facebook') }}" class="btn btn-primary">
                                <img src="{{asset('themes/default/images/f.svg')}}" alt="images" class="img-fluid"> Facebook
                            </a>
                            <a href="{{ route('fe.auth.redirect', 'google') }}" class="btn btn-primary">
                                <img src="{{asset('themes/default/images/g.svg')}}" alt="images" class="img-fluid"> Google
                            </a>
                            <a href="{{ route('fe.auth.redirect', 'linkedin') }}" class="btn btn-primary">
                                <img src="{{asset('themes/default/images/in.svg')}}" alt="images" class="img-fluid"> LinkedIn
                            </a>
                        </div>
                        <br>
                        <p>Do you already have an account? <a href="{{ route('fe.login') }}" class="text-primary">Login here</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 login-image">
                <div class="">
                    <img src="{{asset('themes/default/images/login-img.png')}}" alt="logo" class="img-login-box">
                </div>
            </div>
        </div>
    </div>
</section> -->
{{-- <section class="login-sec">
	<div class="containers my-5">
        <div class="row">
            <div class="col-lg-6 .col-sm-12">
                <lottie-player src="{{ asset('assets/b2c_lottie/sign_up.json') }}" background="transparent" speed="1" loop autoplay></lottie-player>
</div>
<div class="login-content col-lg-6 col-sm-12">
    @if (session()->has('status'))
    <!-- <div class="alert alert-success" role="alert">
                            {{ __('A verification link has been sent to your email address.') }}
                        </div> -->
    <div class="alert alert-success" role="alert">
        {{ __('Successfully signed up.') }}
    </div>
    @endif
    @include('common.alert')
    <form method="POST" action="{{ route('fe.register') }}">
        @csrf
        <div class="form-group">
            <!-- <label for="inputFullName">Full Name</label> -->
            <div class="ico">
                <svg xmlns="http://www.w3.org/2000/svg" height="1em" fill="var(--color-primary)" viewBox="0 0 448 512">
                    <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
                </svg>
            </div>
            <input id="inputFullName" type="text" placeholder="Full Name" class="inputs @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name">
            @error('name')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
        <div class="form-group">
            <label for="inputEmail">Email address</label>
            <input id="inputEmail" type="email" placeholder="Enter email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
            @error('email')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
        <div class="form-group">
            <label for="phonenumber">Phone Number</label>
            <input type="number" placeholder="Enter Phone Number" class="form-control @error('phone_no') is-invalid @enderror" name="phone_no" value="{{ old('phone_no') }}" required autocomplete="off">
            @error('phone_no')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
        <div class="form-group">
            <label for="departments">Select Department</label>
            <select name="dept" id="dept" class="form-control" required>
                <option value="">-- Select Department --</option>
                @foreach ($departments as $department)
                <option {{request()->get('department') == $department->id ? 'selected' : ''}} value="{{$department->id}}">{{$department->title}}</option>
                @endforeach
            </select>
            @error('dept')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input id="inputPassword" type="password" placeholder="Password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="password">

            @error('password')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
        <div class="form-group">
            <label for="inputConfirmPassword">Confirm Password</label>
            <input id="inputConfirmPassword" type="password" placeholder="Password" class="form-control @error('password_confirmation') is-invalid @enderror" name="password_confirmation" required autocomplete="password_confirmation">

            @error('password_confirmation')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group form-check">
                    <input type="checkbox" name="terms" value="1" class="form-check-input" id="terms" required>
                    <label class="form-check-label" for="terms"><a href="/terms-and-condition" target="_blank" class="text-primary">Terms and Conditions</a></label>
                </div>
            </div>
        </div>
        <button type="submit" class="default-btn">Sign Up</button>
    </form>
</div>
</div>
</div>
</div>
</section> --}}


<div class="d-none">
    @include('frontend.common.header')
</div>

<div class="containers sign-up-mode">
    <div class="forms-containers">
        <div class="container signin-signup">
            <form method="POST" action="{{ route('fe.register') }}" class="sign-up-form">
                @if (session()->has('status'))
                <div class="alert alert-success" role="alert">
                    {{ __('A verification link has been sent to your email address.') }}
                </div>
                @endif
                @csrf
                @include('common.alert')
                <h2 class="title">Sign up</h2>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                                <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
                            </svg>
                            <input id="inputFullName" type="text" placeholder="Name" class=" @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" />
                        </div>
                        @error('name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                                <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
                            </svg>
                            <input id="inputAge" type="number" placeholder="Age" class=" @error('age') is-invalid @enderror" name="age" value="{{ old('age') }}"  autocomplete="age" />
                        </div>
                            @error('age')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                                <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
                            </svg>
                            <select  name="gender" id="gender" style="border: none; outline: none; background-color: transparent;" >
                                <option value=''>Gender</option>
                                @foreach (\App\Models\Students::getOptionGender() as $gender)
                                    <option value="{{$gender}}" @if(($data->gender ?? null) == $gender) selected @endif>{{$gender}}</option>
                                @endforeach
                            </select>
                        </div>
                        @error('gender')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                                <path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z" />
                            </svg>
                            <input type="number" id="numberInput" placeholder="Phone Number" class=" @error('phone_number') is-invalid @enderror" name="phone_number" value="{{ old('phone_number') }}" required  autocomplete="phone_number" />
                        </div>
                        @error('phone_number')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                                <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
                            </svg>
                            <input id="inputConsultant_Post_graduate" type="text" placeholder="Consultant/Post-graduate" class=" @error('Consultant_Post_graduate') is-invalid @enderror" name="Consultant_Post_graduate" value="{{ old('Consultant_Post_graduate') }}"  autocomplete="Consultant_Post_graduate" />
                        </div>
                        @error('Consultant_Post_graduate')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                                <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
                            </svg>
                            <input id="inputMedical_Registration" type="text" placeholder="State Medical Registration Number" class=" @error('Medical_Registration') is-invalid @enderror" name="Medical_Registration" value="{{ old('Medical_Registration') }}"  autocomplete="Medical_Registration" />
                        </div>
                        @error('Medical_Registration')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                                <path d="M243.4 2.6l-224 96c-14 6-21.8 21-18.7 35.8S16.8 160 32 160v8c0 13.3 10.7 24 24 24H456c13.3 0 24-10.7 24-24v-8c15.2 0 28.3-10.7 31.3-25.6s-4.8-29.9-18.7-35.8l-224-96c-8-3.4-17.2-3.4-25.2 0zM128 224H64V420.3c-.6 .3-1.2 .7-1.8 1.1l-48 32c-11.7 7.8-17 22.4-12.9 35.9S17.9 512 32 512H480c14.1 0 26.5-9.2 30.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1V224H384V416H344V224H280V416H232V224H168V416H128V224zM256 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
                            </svg>
                            <input type="text" id="collegeNameInput" placeholder="Name of Hospital /Medical College" class="@error('college_name') is-invalid @enderror" name="college_name" value="{{ old('college_name') }}"  autocomplete="college_name" />
                        </div>
                        @error('college_name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                                <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
                            </svg>
                            <input type="email" placeholder="Email ID" class=" @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" />

                        </div>
                        @error('email')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                                <path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z" />
                            </svg>
                            <input type="password" id="inputpassword" placeholder="Password" class=" @error('password') is-invalid @enderror" name="password" required autocomplete="password" maxlength="28" />
                            <i class="show-password fa fa-fw fa-eye-slash"></i>
                        </div>
                        @error('password')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                                <path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z" />
                            </svg>
                            <input type="password" id="confirmpassword" placeholder="Confirm Password" class=" @error('password_confirmation') is-invalid @enderror" name="password_confirmation" required autocomplete="password_confirmation" maxlength="28" />
                            <i class="shows-password fa fa-fw fa-eye-slash"></i>
                        </div>
                        @error('password_confirmation')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                <div class="col-md-6">

                    <div class="signup-select">
                        {{-- <select name="dept" id="dept" class="input-fields form-select-reg" required>
                                                <option value="" class="opt">-- Select Department --</option>
                                                @foreach ($departments as $department)
                                                    <option class="opt" {{request()->get('department') == $department->id ? 'selected' : ''}} value="{{$department->id}}">{{$department->title}}</option>
                        @endforeach
                        </select> --}}
                        <select name="dept" id="dept" class="input-fields form-select-reg" >
                            <option value="" class="opt">-- Select Specialty --</option>
                            @foreach ($departments as $department)
                            <option class="opt" value="{{ $department->id }}" {{ old('dept', request()->get('dept')) == $department->id ? 'selected' : '' }}>
                                {{ $department->title }}
                            </option>
                            @endforeach
                            {{-- <option class="opt" value="anaesthesia" {{ old('dept') == 'anaesthesia' ? 'selected' : '' }}>Anaesthesia</option>
                            <option class="opt" value="critical_care" {{ old('dept') == 'critical_care' ? 'selected' : '' }}>Critical Care</option> --}}
                        </select>


                        @error('dept')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
                </div>
                <button type="submit" class="default-btn">Sign Up</button>
            </form>
        </div>
    </div>

    <div class="panels-containers container-fluid">
        <div class="panel left-panel">

        </div>
        <div class="panel right-panel">
            <div class="content">
                <h3 class="text-secondary fe-3">One of us ?</h3>
                <p>
                    Sign up today and unlock a world of possibilities! Create your account in just a few simple steps to gain access to exclusive features.
                </p>
                <a href="/login"><button class="my-1 btn " id="sign-in-btn">
                        Sign in
                    </button></a>
                <a href="/">
                    <button class="my-1 btn " id="sign-up-btn">
                        Back to Home
                    </button>
                </a>
            </div>
            <!-- <img src="{{ asset('assets/b2c_img/plus-01.png') }}" class="image" alt="img" style="width:350px"/> -->
        </div>
    </div>
</div>
@include('frontend.block.subscribe')

@endsection
@push('script')
<script>
    const sign_in_btn = document.querySelector("#sign-in-btn");
    const sign_up_btn = document.querySelector("#sign-up-btn");
    const containers = document.querySelector(".containers");

    sign_up_btn.addEventListener("click", () => {
        containers.classList.add("sign-up-mode");
    });

    sign_in_btn.addEventListener("click", () => {
        containers.classList.remove("sign-up-mode");
    });
</script>
<script>
    $(".show-password").click(function() {
        $(this).toggleClass("fa-eye fa-eye-slash");
        input = $(this).parent().find("input");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });
    $(".shows-password").click(function() {
        $(this).toggleClass("fa-eye fa-eye-slash");
        input = $(this).parent().find("input");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var numberInput = document.getElementById('numberInput');

        numberInput.addEventListener('input', function() {
            var maxDigits = 16;
            if (numberInput.value.length > maxDigits) {
                numberInput.value = numberInput.value.slice(0, maxDigits);
            }
        });
    });
</script>
<script src="{{ asset('assets/knewton_front/js/main.js') }}"></script>
@endpush