@extends('layouts.auth.base')

@section('content')
    <div class="container-fluid bg">
        <div class="row min-vh-100">
            <div class="col-md-8 col-lg-8 col-xl-9 mobile-hidden my-auto ps-5 ps-md-5 ps-sm-3">
                <div><img class="img-fluid" src="{{ asset('assets/img/logoW.png') }}" width="17%">
                    <h1 class="text-white mt-5">Investment <span class="underline"><span style="color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) ;">Excellence</span></span></h1>
                </div>
            </div>
            <div class="col-md-4 col-lg-4 col-xl-3 d-xxl-flex px-sm-5 my-sm-auto my-auto px-4 px-md-4 px-lg-3">
                <div class="desktop-hidden mb-4 text-center"><img class="img-fluid" src="{{ asset('assets/img/logoW.png') }}" width="20%"></div>
                <div style="padding-bottom: 100px !important;" class="w-100 auth-card px-4 py-5 mt-3 mb-3">
                    
                        <div class="row">
                            <div class="col-6 col-sm-6 col-md-6 col-lg-6 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                <label class="form-label" for="_individual" style="width:100%;">
                                    <div class="p-method d-flex" x-on:click="$refs._individual1.checked">
                                        <input checked required id="_individual" type="radio" name="account_type"
                                            value="individual" x-model="paymentmethod" x-ref="_individual1" />
                                        <span class="form-label ms-2 mt-2">Individual</span>
                                    </div>
                                </label>
                            </div>
                            <div class="col-6 col-sm-6 col-md-6 col-lg-6 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                <label class="form-label" for="_company" style="width:100%;">
                                    <div class="p-method d-flex" x-on:click="$refs._company1.checked">
                                        <input required id="_company" type="radio" name="account_type"
                                            value="company" x-model="paymentmethod" x-ref="_company1" />
                                        <span class="form-label ms-2 mt-2">Company</span>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="individual-reg">
                            <form method="POST" action="{{ route('register') }}">{{ csrf_field() }}
                                <div class="mb-3">
                                    <label class="form-label" for="fullname">Full Name</label>
                                    <input name="name" value="{{ old('name') }}" class="form-control py-2 px-3 @error('name') is-invalid @enderror" type="text" id="fullname" autofocus="" autocomplete="name" required="">
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="email">Email Address</label>
                                    <input class="form-control py-2 px-3 @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" type="email" id="email" autofocus="" autocomplete="email" inputmode="email" required="">

                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="company_phone_number">Phone Number</label>
                                    <input name="company_phone_number" value="{{ old('company_phone_number') }}" class="form-control py-2 px-3" type="text" id="company_phone_number" autofocus="" autocomplete="company_phone_number" required="">
                                </div>
                                <div class="mb-3" x-data="{ show: true, password: '' }">
                                    <label class="form-label" for="password">Password</label>
                                    <input name="password" autocomplete="new-password" class="form-control py-2 px-3 @error('password') is-invalid @enderror" type="password" id="password" :type="show ? 'password' : 'text'" minlength="6" required="" maxlength="20" x-model="password"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{' d-none' : !show, 'd-block' : show, 'd-none': password == ''}" x-cloak="">
                                    <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -64 640 640" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{' d-none' : show, 'd-block' : !show}" x-cloak=""><path d="M150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L150.7 92.77zM223.1 149.5L313.4 220.3C317.6 211.8 320 202.2 320 191.1C320 180.5 316.1 169.7 311.6 160.4C314.4 160.1 317.2 159.1 320 159.1C373 159.1 416 202.1 416 255.1C416 269.7 413.1 282.7 407.1 294.5L446.6 324.7C457.7 304.3 464 280.9 464 255.1C464 176.5 399.5 111.1 320 111.1C282.7 111.1 248.6 126.2 223.1 149.5zM320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L177.4 235.8C176.5 242.4 176 249.1 176 255.1C176 335.5 240.5 400 320 400C338.7 400 356.6 396.4 373 389.9L446.2 447.5C409.9 467.1 367.8 480 320 480H320z"></path></svg>
                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="mb-3" x-data="{ show: true, password: '' }">
                                    <label class="form-label" for="password">Repeat Password</label>
                                    <input autocomplete="new-password" name="password_confirmation" class="form-control py-2 px-3" type="password" id="password" :type="show ? 'password' : 'text'" minlength="6" required="" maxlength="20" x-model="password"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{' d-none' : !show, 'd-block' : show, 'd-none': password == ''}" x-cloak="">
                                    <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -64 640 640" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{' d-none' : show, 'd-block' : !show}" x-cloak=""><path d="M150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L150.7 92.77zM223.1 149.5L313.4 220.3C317.6 211.8 320 202.2 320 191.1C320 180.5 316.1 169.7 311.6 160.4C314.4 160.1 317.2 159.1 320 159.1C373 159.1 416 202.1 416 255.1C416 269.7 413.1 282.7 407.1 294.5L446.6 324.7C457.7 304.3 464 280.9 464 255.1C464 176.5 399.5 111.1 320 111.1C282.7 111.1 248.6 126.2 223.1 149.5zM320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L177.4 235.8C176.5 242.4 176 249.1 176 255.1C176 335.5 240.5 400 320 400C338.7 400 356.6 396.4 373 389.9L446.2 447.5C409.9 467.1 367.8 480 320 480H320z"></path></svg>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="refcode">Referral Code<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-info-circle ms-1" data-bs-toggle="tooltip" data-bss-tooltip="" title="Referral code received from your upline">
                                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                                        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                                        </svg>
                                    </label>
                                    <input class="form-control" name="referral_code" value="{{ request()->query('rel') }}" type="text" id="refcode" minlength="3" maxlength="8">
                                </div>
                                <div class="mb-3"><small>By creating an account you agree to our&nbsp;<a href="https://prplife.com/terms-of-service/" target="_blank">Terms &amp; Conditions</a><br></small></div>
                                <div class="g-recaptcha mb-3 brochure__form__captcha" data-sitekey="6Lf0cdomAAAAANwjsEaowVGOl1Lh-22xLSqODlZY"></div>
                                <div class="mb-3"><button type="submit" class="btn btn-primary py-2 px-3" role="button">Create Account</button></div>
                            </form>
                        </div>

                        <div class="company-reg d-none">
                            <form method="POST" action="{{ route('register') }}">{{ csrf_field() }}
                                <div class="mb-3">
                                    <label class="form-label" for="company_name">Company Name</label>
                                    <input name="name" value="{{ old('company_name') }}" class="form-control py-2 px-3" type="text" id="company_name" autofocus="" autocomplete="company_name" required="">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="company_name">Registration Number</label>
                                    <input name="registration_number" value="{{ old('registration_number') }}" class="form-control py-2 px-3" type="text" id="registration_number" autofocus="" autocomplete="registration_number" required="">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="company_address">Company Address</label>
                                    <input name="company_address" value="{{ old('company_address') }}" class="form-control py-2 px-3" type="text" id="company_address" autofocus="" autocomplete="company_address" required="">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="company_email">Company Email</label>
                                    <input name="email" value="{{ old('company_email') }}" class="form-control py-2 px-3" type="text" id="company_email" autofocus="" autocomplete="company_email" required="">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="company_phone_number">Company Phone Number</label>
                                    <input name="company_phone_number" value="{{ old('company_phone_number') }}" class="form-control py-2 px-3" type="text" id="company_phone_number" autofocus="" autocomplete="company_phone_number" required="">
                                </div>
                                <div class="mb-3" x-data="{ show: true, password: '' }">
                                    <label class="form-label" for="password">Password</label>
                                    <input name="password" autocomplete="new-password" class="form-control py-2 px-3 @error('password') is-invalid @enderror" type="password" id="password" :type="show ? 'password' : 'text'" minlength="6" required="" maxlength="20" x-model="password"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{' d-none' : !show, 'd-block' : show, 'd-none': password == ''}" x-cloak="">
                                    <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -64 640 640" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{' d-none' : show, 'd-block' : !show}" x-cloak=""><path d="M150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L150.7 92.77zM223.1 149.5L313.4 220.3C317.6 211.8 320 202.2 320 191.1C320 180.5 316.1 169.7 311.6 160.4C314.4 160.1 317.2 159.1 320 159.1C373 159.1 416 202.1 416 255.1C416 269.7 413.1 282.7 407.1 294.5L446.6 324.7C457.7 304.3 464 280.9 464 255.1C464 176.5 399.5 111.1 320 111.1C282.7 111.1 248.6 126.2 223.1 149.5zM320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L177.4 235.8C176.5 242.4 176 249.1 176 255.1C176 335.5 240.5 400 320 400C338.7 400 356.6 396.4 373 389.9L446.2 447.5C409.9 467.1 367.8 480 320 480H320z"></path></svg>
                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="mb-3" x-data="{ show: true, password: '' }">
                                    <label class="form-label" for="password">Repeat Password</label>
                                    <input autocomplete="new-password" name="password_confirmation" class="form-control py-2 px-3" type="password" id="password" :type="show ? 'password' : 'text'" minlength="6" required="" maxlength="20" x-model="password"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{' d-none' : !show, 'd-block' : show, 'd-none': password == ''}" x-cloak="">
                                    <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -64 640 640" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{' d-none' : show, 'd-block' : !show}" x-cloak=""><path d="M150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L150.7 92.77zM223.1 149.5L313.4 220.3C317.6 211.8 320 202.2 320 191.1C320 180.5 316.1 169.7 311.6 160.4C314.4 160.1 317.2 159.1 320 159.1C373 159.1 416 202.1 416 255.1C416 269.7 413.1 282.7 407.1 294.5L446.6 324.7C457.7 304.3 464 280.9 464 255.1C464 176.5 399.5 111.1 320 111.1C282.7 111.1 248.6 126.2 223.1 149.5zM320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L177.4 235.8C176.5 242.4 176 249.1 176 255.1C176 335.5 240.5 400 320 400C338.7 400 356.6 396.4 373 389.9L446.2 447.5C409.9 467.1 367.8 480 320 480H320z"></path></svg>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="refcode">Referral Code<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-info-circle ms-1" data-bs-toggle="tooltip" data-bss-tooltip="" title="Referral code received from your upline">
                                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                                        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                                        </svg>
                                    </label>
                                    <input class="form-control" name="referral_code" value="{{ request()->query('rel') }}" type="text" id="refcode" required>
                                </div>
                                <div class="mb-3"><small>By creating an account you agree to our&nbsp;<a href="https://prplife.com/terms-of-service/" target="_blank">Terms &amp; Conditions</a><br></small></div>
                                <div class="g-recaptcha mb-3 brochure__form__captcha" data-sitekey="6Lf0cdomAAAAANwjsEaowVGOl1Lh-22xLSqODlZY"></div>
                                <div class="mb-3"><button type="submit" class="btn btn-primary py-2 px-3" role="button">Create Account</button></div>
                            </form>
                        </div>
                    <hr><small>Already have an account?&nbsp;&nbsp;<a href="{{ route('login') }}">Login</a><br></small>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script>
        $('#el').is(':checked')

        $('input[type=radio][name=account_type]').change(function() {
            if (this.value == 'company') {
                $('.company-reg').removeClass('d-none');
                $('.individual-reg').addClass('d-none');
            } else {
                $('.individual-reg').removeClass('d-none');
                $('.company-reg').addClass('d-none');
            }
        });
    </script>
@endsection