@extends($activeTemplate . 'layouts.frontend')
@section('content')
    @if (gs('registration'))
        <section class="account">
            <div class="container">
                <div class="account-wrapper">
                    <div class="row g-0">
                        <div class="col-lg-6 d-none d-lg-block">
                            <div class="account-thumb">
                                <img src="{{ asset($activeTemplateTrue . 'images/login.png') }}" alt="">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="account-form">
                                <div class="account-form__content">
                                    <h4 class="account-form__title">@lang('Register')</h4>
                                    <p class="account-form__desc"> @lang('Already have an account')? <a href="{{ route('user.home') }}"
                                            class="text--base">
                                            @lang('Log in ')</a></p>
                                </div>
                                <form class="verify-gcaptcha disableSubmission" action="{{ route('user.register') }}"
                                    method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-xl-6 form-group">
                                            <label class="form--label">@lang('First Name')</label>
                                            <input type="text" class="form--control" name="firstname"
                                                value="{{ old('firstname') }}" required />
                                        </div>
                                        <div class="col-xl-6 form-group">
                                            <label class="form--label">@lang('Last Name')</label>
                                            <input type="text" class="form--control" name="lastname"
                                                value="{{ old('lastname') }}" required />
                                        </div>
                                        <div class="col-sm-12 form-group">
                                            <label class="form--label">@lang('Your email address')</label>
                                            <input type="text" class="form--control checkUser" name="email"
                                                value="{{ old('email') }}" required />
                                        </div>

                                        <div class="col-sm-12 form-group">
                                            <label for="your-password" class="form--label">@lang('Password')</label>
                                            <div class="position-relative">
                                                <input type="password"
                                                    class="form-control form--control @if (gs('secure_password')) secure-password @endif"
                                                    name="password" value="{{ old('password') }}" required />
                                                <span class="password-show-hide fas fa-solid toggle-password fa-eye-slash"
                                                    data-target="password"></span>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 form-group">
                                            <label for="confirm-password" class="form--label">@lang('Confirm Password')</label>
                                            <div class="position-relative">
                                                <input type="password" class="form-control form--control"
                                                    name="password_confirmation" value="{{ old('password_confirmation') }}"
                                                    required />
                                                <span class="password-show-hide fas fa-solid toggle-password fa-eye-slash"
                                                    data-target="password_confirmation"></span>
                                            </div>
                                        </div>

                                        @php
                                            $label = 'Captcha';
                                        @endphp

                                        <x-captcha :hasLabel="$label" />

                                        @if (gs('agree'))
                                            @php
                                                $policyPages = getContent(
                                                    'policy_pages.element',
                                                    false,
                                                    orderById: true,
                                                );
                                            @endphp
                                            <div class="form-group">
                                                <input type="checkbox" id="agree" @checked(old('agree'))
                                                    name="agree" required />
                                                <label for="agree">@lang('I agree with')</label> <span>
                                                    @foreach ($policyPages as $policy)
                                                        <a href="{{ route('policy.pages', $policy->slug) }}"
                                                            target="_blank">{{ __($policy->data_values->title) }}</a>
                                                        @if (!$loop->last)
                                                            ,
                                                        @endif
                                                    @endforeach
                                                </span>
                                            </div>
                                        @endif

                                        <div class="col-sm-12 form-group mb-0">
                                            <button type="submit" class="btn btn--base w-100">@lang('Sign up')</button>
                                        </div>
                                    </div>
                                    @include($activeTemplate . 'partials.social_login', [
                                        'register' => true,
                                    ])
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="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">
                        <h5 class="modal-title" id="existModalLongTitle">@lang('You are with us')</h5>
                        <span type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <i class="las la-times"></i>
                        </span>
                    </div>
                    <div class="modal-body">
                        <h6 class="text-center">@lang('You already have an account please Login')</h6>
                    </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 btn--sm">@lang('Login')</a>
                    </div>
                </div>
            </div>
        </div>
    @else
        @include($activeTemplate . '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