@extends($activeTemplate . 'layouts.frontend')
@section('content')
    @php
        $policyPages = getContent('policy_pages.element', false, null, true);
        $auth = getContent('authentication.content', true);
        $credentials = $general->socialite_credentials;
    @endphp
    <section class="login-section position-relative">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 d-flex align-items-center justify-content-start d-none d-xl-block">
                    <div class="thumb--wrap">
                        @if(!empty($auth?->data_values?->auth_image))
                            <img src="{{ getImage(getFilePath('frontend') . '/authentication/' . $auth->data_values->auth_image) }}"
                                alt="@lang('Banner Image')">
                        @else
                            <img src="{{ asset('assets/images/general/default.png') }}" alt="@lang('Default Banner')">
                        @endif
                    </div>
                </div>
                <div class="col-xl-6 col-lg-8 col-md-10 col-md-8">
                    <div class="login-box w--100">

                        <div class="content mb-5">
                            <h4 class="title mb-2">@lang('Sign Up to Your Account')</h4>
                            <p class="text-center">@lang('Enter your credentials to create your account.')</p>
                        </div>
                        <div class="form--wrap">
                             <form action="{{ route('user.register') }}" method="POST" class="verify-gcaptcha">
                                 @csrf
                                <div class="row">
                                    @if(session()->get('reference') != null)
                                        <div class="col-lg-12">
                                            <div class="form-group mb-4 ">
                                                <label for="referenceBy" class="form--label mb-2">@lang('Reference by')</label>
                                                <input type="text" name="referBy" id="referenceBy" class="form-control form--control" value="{{session()->get('reference')}}" readonly>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-lg-6">
                                        <div class="mb-4 form-group">
                                            <label class="mb-2 form--label">@lang('Username')<span
                                                    class="text-danger">*</span></label>
                                            <input class="form--control checkUser" name="username" id="username"
                                                value="{{ old('username') }}" placeholder="@lang('Username')" required>
                                            <small class="text-danger usernameExist"></small>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-4 form-group">
                                            <label class="mb-2 form--label">@lang('E-Mail Address')<span
                                                    class="text-danger">*</span></label>
                                            <input class="form--control checkUser" name="email" id="email"
                                                value="{{ old('username') }}" placeholder="@lang('Email')" required>
                                            <small class="text-danger emailExist"></small>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-4 form-group">
                                            <label class="mb-2 form--label ">@lang('Country')<span class="text-danger">*</span></label>
                                            <select class="form-select form--control form--select" name="country"  required="" id="gateway">
                                                @foreach ($countries as $key => $country)
                                                    <option data-mobile_code="{{ $country->dial_code }}"
                                                        value="{{ $country->country }}"
                                                        data-code="{{ $key }}">{{ __($country->country) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-4 form-group">
                                            <label class="mb-2 form--label ">@lang('Mobile')<span class="text-danger">*</span></label>
                                            <div class="input-group mb-4">
                                                <span class="input-group-text bg--base text-white mobile-code"></span>
                                                <input type="hidden" name="mobile_code">
                                                <input type="hidden" name="country_code">
                                                <input type="number" name="mobile" value="{{ old('mobile') }}" class="form-control form--control checkUser" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-4 ">
                                            <div class="form-group">
                                                <label class="mb-2 form--label">@lang('Password')<span class="text-danger">*</span></label>
                                                <div class="input--group position-relative">
                                                    <input type="password" class="form--control" id="password" name="password" placeholder="@lang('Password')" required>
                                                    <div class="password-show-hide fas fa-eye-slash toggle-password-change" data-target="password"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-4">
                                            <div class="form-group">
                                                <label class="mb-2 form--label">@lang('Confirm Password')<span class="text-danger">*</span></label>
                                                <div class="input--group position-relative">
                                                    <input type="password" class="form--control" id="password_confirmation" name="password_confirmation" placeholder="@lang('Confirm Password')" required>
                                                    <div class="password-show-hide fas fa-eye-slash toggle-password-change" data-target="password_confirmation"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <x-captcha></x-captcha>
                                    </div>
                                    @if ($general->agree)
                                        <div class="col-lg-12">
                                            <div class="mb-4">
                                                <div class="form-group">
                                                    <input type="checkbox" id="agree" @checked(old('agree'))
                                                        name="agree" required>
                                                    <label for="agree">@lang('I agree with') @foreach ($policyPages as $policy)
                                                            <a href="{{ route('policy.pages', [slug($policy->data_values->title), $policy->id]) }}"
                                                                class="text--base">{{ __($policy->data_values->title) }}</a>
                                                            @if (!$loop->last)
                                                                ,
                                                            @endif
                                                        @endforeach
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                <button type="submit" class="btn btn--base btn--lg w-100" id="recaptcha">@lang('Sign Up')</button>
                            </form>
                        </div>

                         @if ($credentials->google->status == 1 || $credentials->facebook->status == 1)
                            <div class="social-option mb-4">
                                <div class="text position-relative d-flex justify-content-center mb-3">
                                    <h6 class="bg--white mb-0">@lang('OR')</h6>
                                </div>
                                <ul class="d-flex justify-content-center align-items-center gap--12">
                                    @if ($credentials->google->status == 1)
                                    <li>
                                        <a href="{{ route('user.social.login', 'google') }}" class="w--100 h--100 d-flex justify-content-center align-items-center">
                                            <i class="fa-brands fa-google text--base"></i>
                                        </a>
                                    </li>
                                    @endif

                                    @if ($credentials->facebook->status == 1)
                                    <li>
                                        <a href="{{ route('user.social.login', 'facebook') }}" class="w--100 h--100 d-flex justify-content-center align-items-center">
                                            <i class="fa-brands fa-facebook text--base"></i>
                                        </a>
                                    </li>
                                    @endif
                                </ul>
                            </div>
                        @endif

                        <div class="mt-4 text-center">
                            <p>@lang('Already have an account?') <a href="{{ route('user.login') }}" class="text--underline text--base">@lang('Sign In')</a></p>
                        </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--base 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>
@endsection
@push('style')
    <style>
        .country-code .input-group-text {
            background: #fff !important;
        }

        .country-code select {
            border: none;
        }

        .country-code select:focus {
            border: none;
            outline: none;
        }
    </style>
@endpush

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

            @if($mobileCode)
                $(`option[data-code={{ $mobileCode }}]`).attr('selected', '');
            @endif

            $('select[name=country]').on('change',function () {
                $('input[name=mobile_code]').val($('select[name=country] :selected').data('mobile_code'));
                $('input[name=country_code]').val($('select[name=country] :selected').data('code'));
                $('.mobile-code').text('+' + $('select[name=country] :selected').data('mobile_code'));
            });
            $('input[name=mobile_code]').val($('select[name=country] :selected').data('mobile_code'));
            $('input[name=country_code]').val($('select[name=country] :selected').data('code'));
            $('.mobile-code').text('+' + $('select[name=country] :selected').data('mobile_code'));
         
            $('.checkUser').on('focusout', function (e) {

                var url = "{{ route('user.checkUser') }}";
                var value = $(this).val();
                var token = '{{ csrf_token() }}';
                if ($(this).attr('name') == 'mobile') {
                    var mobile = `${$('.mobile-code').text().substr(1)}${value}`;
                    var data = { mobile: mobile, _token: token }
                }
                if ($(this).attr('name') == 'email') {
                    var data = { email: value, _token: token }
                }
                if ($(this).attr('name') == 'username') {
                    var data = { username: value, _token: token }
                }
                $.post(url, data, function (response) {
                    if (response.data != false && response.type == 'email') {
                        $('#existModalCenter').modal('show');
                    } else if (response.data != false) {
                        $(`.${response.type}Exist`).text(`${response.type} already exist`);
                    } else {
                        $(`.${response.type}Exist`).text('');
                    }
                });
            });
        })(jQuery);

    </script>
@endpush