@extends('Template::layouts.app')

@php
    $bgImage = getContent('backgroundImage.content', true);
@endphp

@section('panel')
    <section class="account--section bg_img bg--overlay pb-80 pt-80" data-background="{{ getImage('assets/images/frontend/backgroundImage/' . @$bgImage->data_values->image, '1920x1080') }}">
        <div class="container">

            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-6">
                    <div class="contact-wrapper bg--glass">
                        @if (gs('registration'))
                            <div class="logo">
                                <a href="{{ route('home') }}"><img src="{{ siteLogo() }}" alt="logo"></a>
                            </div>
                            <h3 class="title text-center text--white mb-20 mb-lg-4">@lang('Create an Account')</h3>

                            @include('Template::partials.social_login')

                            <form action="{{ route('user.register') }}" method="POST" class="account-form verify-gcaptcha disableSubmission">
                                @csrf
                                <div class="row gy-4">
                                    @if (session()->get('reference') != null)
                                        <div class="col-md-12">
                                            <label for="referenceBy" class="form-label custom--label">@lang('Reference by')</label>
                                            <input xtype="text" name="referBy" id="referenceBy" class="form-control form--control-2" value="{{ session()->get('reference') }}" readonly>
                                        </div>
                                    @endif

                                    <div class="col-md-6">
                                        <label class="form-label custom--label required">@lang('First Name')</label>
                                        <input type="text" class="form-control form--control-2" name="firstname" value="{{ old('firstname') }}" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label custom--label required">@lang('Last Name')</label>
                                        <input type="text" class="form-control form--control-2" name="lastname" value="{{ old('lastname') }}" required>
                                    </div>

                                    <div class="col-md-12">
                                        <label class="form-label custom--label required">@lang('E-Mail Address')</label>
                                        <input type="email" class="form-control form--control-2 checkUser" name="email" value="{{ old('email') }}" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label custom--label required">@lang('Password')</label>
                                        <input type="password" class="form-control form--control-2 @if (gs('secure_password')) secure-password @endif" name="password" required>

                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label custom--label required">@lang('Confirm Password')</label>
                                        <input type="password" class="form-control form--control-2" name="password_confirmation" required>
                                    </div>

                                    <div class="col-md-12">
                                        <x-captcha />
                                    </div>

                                    <div class="col-md-12">
                                        @if (gs('agree'))
                                            @php
                                                $policyPages = getContent('policy_pages.element', false, orderById: true);
                                            @endphp

                                            <div class="form-check form--check">
                                                <input class="form-check-input" type="checkbox" id="agree" @checked(old('agree')) name="agree" required>
                                                <label class="form-check-label text--white" for="agree">
                                                    @lang('I agree with')

                                                    @foreach ($policyPages as $policy)
                                                        <a class="text--base" href="{{ route('policy.pages', $policy->slug) }}" target="_blank">{{ __($policy->data_values->title) }}</a>
                                                        @if (!$loop->last)
                                                            ,
                                                        @endif
                                                    @endforeach
                                                </label>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-md-12">
                                        <button type="submit" id="recaptcha" class="cmn--btn w-100 justify-content-center">@lang('Create Account')</button>
                                        <p class="text--white mt-2">
                                            @lang('Already have an account?') <a class="text--base" href="{{ route('user.login') }}">@lang('Login')</a>
                                        </p>
                                    </div>
                                </div>
                            </form>
                        @else
                            @include('Template::partials.registration_disabled')
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@if (gs('registration'))

    @push('style')
        <style>
            #referenceBy {
                border: 1px solid rgba(255, 255, 255, 0.1);
                background: rgba(255, 255, 255, 0.1);
                color: #fff;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
        </style>
    @endpush

    @if (gs('secure_password'))
        @push('script-lib')
            <script src="{{ asset('assets/global/js/secure_password.js') }}"></script>
        @endpush
    @endif

    @push('script')
        <script>
            "use strict";
            (function($) {

                $('.checkUser').on('focusout', function(e) {
                    var url = '{{ route('user.checkUser') }}';
                    var value = $(this).val();
                    var token = '{{ csrf_token() }}';

                    var data = {
                        email: value,
                        _token: token
                    }

                    $.post(url, data, function(response) {
                        if (response.data != false) {
                            $('#existModalCenter').modal('show');
                        }
                    });
                });
            })(jQuery);
        </script>
    @endpush

@endif