@extends('layouts.auth.base')
@php
    $radio_groups = [];
@endphp
@section('content')
    <div class="container-fluid bg">
        <div class="row min-vh-100 d-flex justify-content-center">
            <div class="col-md-4">
                <div class="desktop-hidden mb-4 text-center"><img class="img-fluid" src="{{ asset('assets/img/logoW.png') }}" width="20%"></div>
                <div class="w-100 auth-card px-4 py-2 mt-3 mb-3">
                    <h4>{{ $survey->name }}</h4>
                    <hr>
                    <form id="surveyform" method="POST" action="{{ request()->query('skip_dialog') ? route('user_survey_submit') : route('register') }}">{{ csrf_field() }}
                        <input type="hidden" name="svy" value="{{ $survey->id }}">
                        @foreach ($survey->questions as $question)
                            <p class="mt-2">Q{{ $loop->index + 1 }}: {{ $question->question }}</p>
                            @php
                                $radio_groups[] = "answers[$question->id]"
                            @endphp
                            @foreach ($question->answers as $answer)
                                <div>
                                    <label class="form-label" for="answer{{ $answer->id }}" style="width:100%;">
                                        <div class="p-method d-flex">
                                            <input @if($question->is_checkbox == _FALSE) required @endif id="answer{{ $answer->id }}" @if($question->is_checkbox) type="checkbox" @else type="radio" @endif name="answers[{{ $question->id }}]" value="{{ $answer->id }}" />
                                            <span class="form-label ms-2 mt-2">{{ $answer->answer }}</span>
                                        </div>
                                    </label>
                                </div>
                            @endforeach
                        @endforeach
                        <div class="pt-2">
                            <span style="font-size: 14px;">By submitting survey you agree to our</span> <a href="#" data-bs-target=".survey-terms-dialog" data-bs-toggle="modal" type="button">Terms & Conditions</a>
                        </div>
                        <div class="mb-3 mt-3">
                            @if(request()->query('skip_dialog'))
                                <button type="submit" disabled class="btn btn-primary py-2 px-3" id="submit-survey-btn">Submit Survey<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1 mt-n1">
                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path></svg>
                                </button>
                            @else
                                <button type="button" disabled class="btn btn-primary py-2 px-3" id="submit-survey-btn">Submit Survey<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1 mt-n1">
                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path></svg>
                                </button>
                            @endif
                        </div>






                        <div class="modal fade" role="dialog" tabindex="-1" id="submit-survey-dialog">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header border-0">
                                        <h4 class="modal-title">Lets get to know you</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    
                                    <div class="modal-body">
                                       
                                        @if(!request()->query('skip_dialog'))
                                        <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.7C608.8 251.6 608.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>
                                        @endif
                                        
                                        
                                        @if(!request()->query('skip_dialog'))
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group mb-3">
                                                    <button class="btn btn-primary" type="submit">Create Account</button>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    
                                </div>
                            </div>
                        </div>

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







    <div class="modal fade survey-terms-dialog" role="dialog" tabindex="-1" >
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h4 class="modal-title">Lets get to know you</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <div class="modal-body">
                   
                    @include('survey-terms')

                </div>
                
            </div>
        </div>
    </div>







<input type="hidden" id="version">
@endsection


@section('scripts')
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script>
        $('#el').is(':checked')
        $('#submit-survey-btn').on('click', function(){
            @if(!request()->query('skip_dialog'))
                $('#submit-survey-dialog').modal('show')
            @endif
        })



        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('surveyform');
            const submitButton = document.getElementById('submit-survey-btn');
            const groups = {!! json_encode($radio_groups) !!} //['group1', 'group2', 'group3'];

            function checkGroups() {
                let allChecked = true;
                for (let group of groups) {
                    let radios = document.getElementsByName(group);
                    let groupChecked = Array.from(radios).some(radio => radio.checked);
                    if (!groupChecked) {
                        allChecked = false;
                        break;
                    }
                }
                submitButton.disabled = !allChecked;
            }

            form.addEventListener('change', checkGroups);
        });
    </script>
@endsection