@extends('frontend.layouts.app')
@section('frontend_title', 'Tushar Enterprise')

@section('frontend_content')
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 mx-auto px-5 py-5 my-5 shadow-sm rounded">
                <div id="register" class="px-2 py-3 border-1">
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
                        <h4 class="border-b pb-2 mb-3">Register</h4>
                        @if (session('status'))
                            <div class="form-text text-danger mb-2">{{ session('status') }}</div>
                        @endif

                        <div class="form-group">
                            <label for="register-name">Name *</label>
                            <input type="text" class="form-control" id="register-name" name="name" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->
                        <div class="form-group">
                            <label for="register-email">Your email address *</label>
                            <input type="email" class="form-control" id="register-email" name="email" value="{{ old('email') }}" required>
                            @error('email')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-group">
                            <label for="register-password">Password *</label>
                            <div class="position-relative passwordshowhide">
                                <input type="password" class="form-control pe-4" id="register-password" name="password" required>
                                <div class="icon" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;">
                                    <i class="la la-eye-slash show" style="font-size: 24px; cursor: pointer;"></i>
                                    <i class="la la-eye d-none hide" style="font-size: 24px; cursor: pointer;"></i>
                                </div>
                            </div>
                            @error('password')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-group">
                            <label for="confirm-password">Confirm Password *</label>
                            <div class="position-relative passwordshowhide">
                                <input type="password" class="form-control pe-4" id="confirm-password" name="password_confirmation" required>
                                <div class="icon" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;">
                                    <i class="la la-eye-slash show" style="font-size: 24px; cursor: pointer;"></i>
                                    <i class="la la-eye d-none hide" style="font-size: 24px; cursor: pointer;"></i>
                                </div>
                            </div>
                            @error('password_confirmation')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-group">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" name="account_policy" value="" class="custom-control-input" id="account-policy" onchange="
                                var hiddenElement = document.getElementById('hiddenElement');
                                hiddenElement.style.display = this.checked ? 'block' : 'none';
                                this.value = this.checked ? 'wholesaler' : '';
                              ">
                                <label class="custom-control-label" for="account-policy">Wholesaler Account</label>
                            </div><!-- End .custom-checkbox -->
                        </div><!-- End .form-group -->

                        <div class="form-group" id="hiddenElement" style="display: none" onload="this.style.display = document.getElementById('account-policy').checked ? 'block' : 'none';">
                            <label for="referral-code">Referral Code</label>
                            <input type="text" class="form-control" id="referral-code" name="referral_code">
                            @error('referral_code')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-footer justify-content-between">
                            <button type="submit" class="btn btn-outline-primary-2">
                                <span>SIGN UP</span>
                                <i class="icon-long-arrow-right"></i>
                            </button>

                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="register-policy" required>
                                <label class="custom-control-label" for="register-policy">I agree to the <a href="#">privacy policy</a> *</label>
                            </div><!-- End .custom-checkbox -->
                        </div><!-- End .form-footer -->
                    </form>
                   
                </div>
            </div>
        </div>
    </div>
@endsection
@section('frontend_scripts')
    <script>
        $(document).ready(function() {

            $(document).on('click', '.passwordshowhide .icon .show', function() {
                let passwordshowhide = $(this).closest('.passwordshowhide');
                passwordshowhide.find('.show').addClass('d-none');
                passwordshowhide.find('.hide').removeClass('d-none');
                passwordshowhide.find('input').attr('type', 'text');
            });

            $(document).on('click', '.passwordshowhide .icon .hide', function() {
                let passwordshowhide = $(this).closest('.passwordshowhide');
                passwordshowhide.find('.hide').addClass('d-none');
                passwordshowhide.find('.show').removeClass('d-none');
                passwordshowhide.find('input').attr('type', 'password');
            });
        });
    </script>
@endsection