@php
    $registerContent = getContent('registration.content', true);
@endphp
@extends('Template::layouts.frontend')
@section('content')
    @if (gs('registration'))
        <section class="account registration">
            <div class="account-content">
                <div class="account-card">
                    <div class="account-card__header">
                        <a class="account-logo" href="{{ route('home') }}">
                            <img src="{{ siteLogo('dark') }}" alt="">
                        </a>
                    </div>
                    <div class="account-card__body">
                        <div class="social-auth">
                            @include('Template::partials.social_login')
                        </div>

                        <form action="{{ route('user.register') }}" method="POST" class="verify-gcaptcha disableSubmission">
                            @csrf
                            <div class="row gy-4">
                                <div class="form-group col-sm-6">
                                    <label class="form--label" for="">@lang('First Name')</label>
                                    <input class="form-control form--control" name="firstname" value="{{ old('firstname') }}" type="text" required>
                                </div>

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

                                <div class="form-group col-sm-12">
                                    <label class="form--label" for="">@lang('Email Address')</label>
                                    <input class="form-control form--control checkUser" name="email" value="{{ old('email') }}" type="text" required>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label class="form--label" for="">@lang('Password')</label>
                                    <div class="input-group input--group input--group-password">
                                        <input class="form-control form--control secure-password" name="password" type="password" required>
                                        <span class="input-group-text input-group-btn">
                                            <i class="far fa-eye-slash"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label class="form--label" for="">@lang('Confirm password')</label>
                                    <div class="input-group input--group input--group-password">
                                        <input class="form-control form--control" name="password_confirmation" type="password" required>
                                        <span class="input-group-text input-group-btn">
                                            <i class="far fa-eye-slash"></i>
                                        </span>
                                    </div>
                                </div>
                                @if (gs('agree'))
                                    <div class="col-sm-12">
                                        <div class="form--check">
                                            <input type="checkbox" id="agree" name="agree" class="form-check-input" required="">
                                            <label for="agree" class="form-check-label">
                                                @lang('I agree with')
                                                @php
                                                    $policyPages = getContent('policy_pages.element', false, orderById: true);
                                                @endphp
                                                @foreach ($policyPages as $policy)
                                                    <a class="ms-" href="{{ route('policy.pages', $policy->slug) }}" target="_blank">{{ __($policy->data_values?->title) }}</a>
                                                    @if (!$loop->last)
                                                        ,
                                                    @endif
                                                @endforeach
                                            </label>
                                        </div>
                                    </div>
                                @endif
                                <x-captcha />
                                <div class="col-sm-12">
                                    <button class="w-100 btn btn--lg btn--base-two mt-1" type="submit">
                                        @lang('Sign Up')
                                    </button>
                                </div>
                            </div>

                        </form>

                        <p class="account-info">@lang('Already have an account?') <a href="{{ route('user.login') }}">@lang('Sign In')</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="account-thumb bg-img" data-background-image="{{ FrontendImage('registration', $registerContent?->data_values?->background_image ?? '', '960x930') }}">
                <img class="account-thumb__shape one" src="{{ FrontendImage('registration', $registerContent?->data_values?->shape_two ?? '', '350x390') }}" alt="">
                <img class="account-thumb__shape two" src="{{ FrontendImage('registration', $registerContent?->data_values?->shape_one ?? '', '200x205') }}" alt="">
                <div class="account-thumb__content">
                    <span class="account-thumb__tagline">{{ __($registerContent?->data_values?->title ?? '') }}</span>
                    <h2 class="account-thumb__title">{{ __($registerContent?->data_values?->heading ?? '') }}</h2>
                    <p class="account-thumb__desc">
                        {{ __($registerContent?->data_values?->description ?? '') }}
                    </p>
                </div>
            </div>
        </section>

        <div class="modal custom--modal fade" id="existModalCenter" tabindex="-1" role="dialog" aria-labelledby="existModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="existModalLongTitle">@lang('You are with us')</h6>
                        <button type="button" class="btn btn--sm btn--close btn-soft--secondary btn--icon" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="text-center">@lang('You already have an account please Login ')</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn--dark btn--sm" data-bs-dismiss="modal">@lang('Close')</button>
                        <a href="{{ route('user.login') }}" class="btn btn--base-two btn--sm">@lang('Login')</a>
                    </div>
                </div>
            </div>
        </div>
    @else
        @include('Template::partials.registration_disabled')
    @endif

@endsection
@if (gs('registration'))

    @push('style')
        <style>
            .social-login-btn {
                border: 1px solid #cbc4c4;
            }
        </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
