@include('layout.header')

<!-- RECHARGE -->
<div class="recharge resetPassword">
    <!-- HEADER -->
    <nav class="top_nav">
        <div class="left">
            <a href="{{ url('/') }}">
                <img src="{{ asset('assets/img/back_arrow.png') }}" alt="" />
            </a>
            <span>Register</span>
        </div>
    </nav>
    <!-- HEADER -->

    <!-- BODY -->
    <form action="{{ url('/register') }}" method="post">
        @csrf
        <div class="recharge_box bg-transparent shadow-none">
            <div class="input_box password-container">
                <img src="{{ asset('assets/img/mobile.png') }}" alt="" />
                @if (env('ENABLE_OTP'))
                    <input type="hidden" name="mobile_ref" value="">
                    <div>
                        <span>+91</span><input class="border-0 flex-1" style="width: 80%;" type="text" required
                            placeholder="Mobile Number" name="mobile" id="mobile" />
                    </div>
                @else
                    <div>
                        <span>+91</span><input class="border-0 flex-1" style="width: 80%;" type="text" required
                            placeholder="Mobile Number" name="mobile_ref" id="mobile_ref" />
                    </div>
                @endif
            </div>
            @if (env('ENABLE_OTP'))
                <div class="special_box">
                    <div style="width: 70%">
                        <div style="width: 100%">
                            <div class="input_box">
                                <img src="{{ asset('assets/img/verification_code.png') }}" alt="" />
                                <input class="border-0 flex-1" name="login_otp" id="login_otp"
                                    onkeyup="checkOtp(this.value)" onchange="checkOtp(this.value)"
                                    oninput="checkOtp(this.value)" type="text" required
                                    placeholder="Verification Code" disabled />
                            </div>
                            <div>
                                <span id="otp_error" class="error"></span>
                            </div>
                        </div>
                    </div>
                    <input class="gocode m-t-12 m-b-12" type="button" onclick="sendOtp()" id="reg_otp"
                        value="OTP" />
                </div>
            @endif
            <div class="input_box password-container">
                <img src="{{ asset('assets/img/password.png') }}" alt="" />
                <input class="border-0 flex-1" type="password" name="password" id="password" required
                    placeholder="Password" minlength="5" />
                <img src="{{ asset('assets/img/eye.png') }}" alt="Show password" class="password-toggle" />
            </div>
            <div class="input_box">
                <img src="{{ asset('assets/img/recommendation_code.png') }}" alt="" />
                <input class="border-0 flex-1" type="text" name="rcode" id="rcode" value="{{ $rcode }}"
                    placeholder="Recommendation Code" />
            </div>
            <div class="agree_box m-t-12">
                <div role="checkbox" tabindex="0" aria-checked="true"
                    class="van-checkbox d-flex align-items-center gap-0">
                    <label class="form-control_">
                        <input type="checkbox" name="privacy_checkbox" checked required />
                    </label>
                    <span class="van-checkbox__label">I agree
                        <span data-bs-toggle="modal" data-bs-target="#exampleModal2"
                            class="greencolor pointer text-primary fw600">Privacy Policy</span></span>
                </div>
            </div>

            <div class="container-fluid pb-5 pt-4">
                <div class="row">
                    <div class="col-10 col-md-8 col-lg-6 mx-auto text-center">
                        <input type="submit" @if (env('ENABLE_OTP')) disabled @endif id="submit"
                            class="w-100 btn btn-primary mb-5" value="Register" />
                        <a target="_blank" href="{{ $website->telegram }}" class="display-6">Join our Telegram Group</a>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        @if (session('error'))
            toastr.error("{{ session('error') }}", 'Error', {
                timeOut: 5000, // 5 seconds timeout
                closeButton: true,
                progressBar: true
            });
        @endif
    </script>



    <script>
        const togglePassword = document.querySelector('.password-toggle');
        const passwordInput = document.querySelector('#password');

        togglePassword.addEventListener('click', function() {
            const type = passwordInput.type === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            // Optionally, change the icon image based on type (if you have different images for open and closed eye)
        });
    </script>


    <!-- BODY -->
</div>

<!-- MODAL -->
<div class="modal fade modal_ modal_privacy" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header w-100">
                <h5 class="modal-title text-start w-100" id="exampleModalLabel">
                    Privacy Policy
                </h5>
            </div>
            <div class="modal-body privacy_body">
                <div class="content_agree">
                    <div class="contents">
                        {!! $content->privacy !!}
                    </div>
                </div>
            </div>
            <div class="modal-footer border-top border-dark w-100 p-0">
                <div class="row w-100 my-0">
                    <div class="col-12">
                        <button data-bs-dismiss="modal" class="bg-transparent py-2 border-0 w-100 text-end">
                            CLOSE
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL -->

@include('layout.footer')
