@extends('layouts.customregistermaster')

@section('styles')
    <!-- Select2 css -->
    <link href="{{ asset('build/assets/plugins/select2/select2.min.css') }}?v=1765889065" rel="stylesheet" />
@endsection

@section('content')

    <div class="pb-0 px-5 pt-0 text-center">
        <h3 class="mb-2">{{ lang('Register', 'menu') }}</h3>
        <p class="text-muted fs-13 mb-1">{{ lang('Create new account') }}</p>
    </div>
    @if (
            $socialAuthSettings->envato_status == 'enable' ||
            $socialAuthSettings->google_status == 'enable' ||
            $socialAuthSettings->microsoft_status == 'enable'
        )
        <div class="login-icons card-body pt-3 pb-0 text-center justify-content-center">
            @if ($socialAuthSettings->envato_status == 'enable')
                <a class="btn header-buttons text-start social-icon-2 btn-lg btn-lime text-white mb-4 btn-block p-0"
                    href="javascript:;" data-bs-toggle="tooltip" title="{{ lang('Login with Envato') }}"
                    onclick="window.location.href = envato;" data-bs-original-title="{{ lang('Login with Envato') }}">
                    <div class="d-inline w-15 justify-content-center">
                        <svg class="px-4 py-2 my-auto border-end border-white-1" style="enable-background:new 0 0 512 512;"
                            version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="_x38_5-envato">
                                <g>
                                    <g>
                                        <g>
                                            <path fill="#fff"
                                                d="M401.225,19.381c-17.059-8.406-103.613,1.196-166.01,61.218      c-98.304,98.418-95.947,228.089-95.947,228.089s-3.248,13.335-17.086-6.011c-30.305-38.727-14.438-127.817-12.651-140.23      c2.508-17.494-8.615-17.999-13.243-12.229c-109.514,152.46-10.616,277.288,54.136,316.912c75.817,46.386,225.358,46.354,284.922-85.231C509.547,218.042,422.609,29.875,401.225,19.381L401.225,19.381z M401.225,19.381">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                            <g id="Layer_1"></g>
                        </svg>
                    </div>

                    <span class="px-4 py-2 my-auto text-white">Login with Envato</span>
                </a>
            @endif
            @if ($socialAuthSettings->google_status == 'enable')
                <a class="btn header-buttons text-start social-icon-2 btn-lg btn-google text-white mb-4 btn-block p-0"
                    href="javascript:;" data-bs-toggle="tooltip" title="{{ lang('Login with Google') }}"
                    onclick="window.location.href = google;" data-bs-original-title="{{ lang('Login with Google') }}">
                    <div class="d-inline-flex w-7 border-end border-white-1 px-4 py-2 my-auto justify-content-center">
                        <i class="fa fa-google"></i>
                    </div>
                    <span class="px-4 py-2 my-auto text-white">Login with Google</span>
                </a>
            @endif
            @if ($socialAuthSettings->microsoft_status == 'enable')
                <a class="btn header-buttons text-start social-icon-2 btn-lg btn-facebook text-white mb-4 btn-block p-0"
                    href="javascript:;" data-bs-toggle="tooltip" title="{{ lang('Login with Microsoft') }}"
                    onclick="window.location.href = microsoft;"
                    data-bs-original-title="{{ lang('Login with Microsoft') }}">
                    <div class="d-inline-flex w-7 border-end border-white-1 px-4 py-2 my-auto justify-content-center">
                        <i class="fa fa-windows" aria-hidden="true"></i>
                    </div>
                    <span class="px-4 py-2 my-auto text-white">{{ lang('Login with Microsoft') }}</span>
                </a>
            @endif
        </div>
        <div class="text-center mt-5 login-form">
            <div class="divider">
                Or
            </div>
        </div>
    @endif

    <div class="card-body border-top-0 pt-3 pb-0">
        @if (setting('REGISTER_DISABLE') == 'off')
            <div class="alert alert-light-warning br-13 border-0 text-center" role="alert">

                <span class="">{{ setting('login_disable_statement') }}</span>

            </div>
        @endif
        <form method="post" id="register_form">
            <div class="form-group row">
                <div class="col-sm-6 col-md-6 mb-2 mb-sm-0">
                    <label class="form-label">{{ lang('First Name') }} <span class="text-red">*</span></label>
                    <input class="form-control @error('firstname') is-invalid @enderror"
                        placeholder="{{ lang('Firstname') }}" type="text" name="firstname"
                        id="firstname" value="{{ old('firstname') }}">
                    <span class="text-red" id="firstnameError"></span>
                    @error('firstname')
                        <span class="invalid-feedback d-block" role="alert">
                            <strong>{{ lang($message) }}</strong>
                        </span>
                    @enderror

                </div>
                <div class="col-sm-6 col-md-6">
                    <label class="form-label">{{ lang('Last Name') }} <span class="text-red">*</span></label>
                    <input class="form-control @error('lastname') is-invalid @enderror"
                        placeholder="{{ lang('Lastname') }}" type="text" name="lastname" id="lastname" value="{{ old('lastname') }}">
                    <span class="text-red" id="lastnameError"></span>
                    @error('lastname')
                        <span class="invalid-feedback d-block" role="alert">
                            <strong>{{ lang($message) }}</strong>
                        </span>
                    @enderror

                </div>

            </div>
            <div class="form-group">
                <label class="form-label">{{ lang('Email') }} <span class="text-red">*</span></label>
                <input class="form-control @error('email') is-invalid @enderror" placeholder="{{ lang('Email') }}"
                 id="email"   type="email" name="email" value="{{ old('email') }}" autocomplete="username">
                <span class="text-red" id="emailError"></span>
                @error('email')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ lang($message) }}</strong>
                    </span>
                @enderror

            </div>
            <div class="form-group row">
                <div class="col-sm-6 col-md-6">
                    <label class="form-label">{{ lang('Password') }} <span class="text-red">*</span></label>
                    <input class="form-control @error('password') is-invalid @enderror"
                        placeholder="{{ lang('password') }}" type="password" name="password" id="password"
                        autocomplete="new-password">
                    <span class="text-red" id="passwordError"></span>
                    @error('password')
                        <span class="invalid-feedback d-block" role="alert">
                            <strong>{{ lang($message) }}</strong>
                        </span>
                    @enderror

                </div>
                <div class="col-sm-6 col-md-6">
                    <label class="form-label">{{ lang('Confirm Password') }} <span class="text-red">*</span></label>
                    <input class="form-control @error('password_confirmation') is-invalid @enderror"
                        placeholder="{{ lang('password') }}" type="password" name="password_confirmation" id="password_confirmation"
                        autocomplete="new-password">
                    <span class="text-red" id="passwordconfirmError"></span>
                    @error('password_confirmation')
                        <span class="invalid-feedback d-block" role="alert">
                            <strong>{{ lang($message) }}</strong>
                        </span>
                    @enderror
                </div>
            </div>
            @if ($customfields->isNotEmpty())
                @foreach ($customfields as $customfield)
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-12">
                                <label class="form-label">{{ $customfield->fieldnames }}
                                    @if ($customfield->fieldrequired == '1')
                                        <span class="text-red">*</span>
                                    @endif
                                </label>

                                @if ($customfield->fieldtypes == 'text')
                                    <input type="{{ $customfield->fieldtypes }}" class="form-control" name="custom_{{ $customfield->id }}"  data-required="{{$customfield->fieldrequired}}" >
                                    <span id="custom_{{$customfield->id}}Error" class="text-danger"></span>
                                @endif
                                @if ($customfield->fieldtypes == 'email')
                                    <input type="{{ $customfield->fieldtypes }}" class="form-control" name="custom_{{ $customfield->id }}"  data-required="{{$customfield->fieldrequired}}">
                                    <span id="custom_{{$customfield->id}}Error" class="text-danger"></span>
                                @endif
                                @if ($customfield->fieldtypes == 'textarea')
                                    <textarea name="custom_{{ $customfield->id }}" class="form-control" cols="30" rows="5" data-required="{{$customfield->fieldrequired}}" ></textarea>
                                    <span id="custom_{{$customfield->id}}Error" class="text-danger"></span>
                                @endif
                                @if ($customfield->fieldtypes == 'checkbox')
                                    @php
                                        $coptions = explode(',', $customfield->fieldoptions);
                                    @endphp
                                    @foreach ($coptions as $key => $coption)
                                        <label class="custom-control form-checkbox d-inline-block me-3">
                                            <input type="{{ $customfield->fieldtypes }}" class="custom-control-input "
                                                name="custom_{{ $customfield->id }}[]" value="{{ $coption }}" data-required="{{$customfield->fieldrequired}}">

                                            <span class="custom-control-label">{{ $coption }}</span>
                                        </label>
                                    @endforeach
                                    <span id="custom_{{$customfield->id}}Error" class="text-danger"></span>
                                @endif
                                @if ($customfield->fieldtypes == 'select')
                                    <select name="custom_{{ $customfield->id }}"
                                        class="form-control select2 select2-show-search" data-placeholder="{{ lang('Select') }}" data-required="{{$customfield->fieldrequired}}" >
                                        @php
                                            $seoptions = explode(',', $customfield->fieldoptions);
                                        @endphp
                                        <option></option>
                                        @foreach ($seoptions as $seoption)
                                            <option value="{{ $seoption }}">{{ $seoption }}</option>
                                        @endforeach
                                    </select>
                                    <span id="custom_{{$customfield->id}}Error" class="text-danger"></span>
                                @endif
                                @if ($customfield->fieldtypes == 'radio')
                                    @php
                                        $roptions = explode(',', $customfield->fieldoptions);
                                    @endphp
                                    @foreach ($roptions as $roption)
                                        <label class="custom-control form-radio d-inline-block me-3">
                                            <input type="{{ $customfield->fieldtypes }}" class="custom-control-input" name="custom_{{ $customfield->id }}" value="{{ $roption }}" data-required="{{$customfield->fieldrequired}}">
                                            <span class="custom-control-label">{{ $roption }}</span>
                                        </label>
                                    @endforeach
                                    <span id="custom_{{$customfield->id}}Error" class="text-danger"></span>
                                @endif

                            </div>
                        </div>
                    </div>
                @endforeach
            @endif



            @if (setting('CAPTCHATYPE') == 'manual')
                @if (setting('RECAPTCH_ENABLE_REGISTER') == 'yes')
                    <div class="form-group row @error('captcha') is-invalid @enderror">
                        <div class="col-sm-6 col-md-6">
                            <input type="text" id="captcha" class="form-control "
                                placeholder="{{ lang('Enter Captcha') }}" name="captcha">

                        </div>
                        <div class="col-sm-6 col-md-6">
                            <div class="captcha">
                                <span>{!! captcha_img('') !!}</span>
                                <button type="button" class="btn btn-outline-info btn-sm captchabtn"><i
                                        class="fe fe-refresh-cw"></i></button>
                            </div>
                        </div>
                    </div>
                    @error('captcha')
                        <span class="invalid-feedback d-block" role="alert">
                            <strong>{{ lang($message) }}</strong>
                        </span>
                    @enderror
                @endif
            @endif

            <!--- if Enable the Google ReCaptcha --->
            <div class="form-group">
                @if (setting('CAPTCHATYPE') == 'google')
                    @if (setting('RECAPTCH_ENABLE_REGISTER') == 'yes')
                        <div class="g-recaptcha" data-sitekey="{{ setting('GOOGLE_RECAPTCHA_KEY') }}"></div>

                        <!-- @if ($errors->has('g-recaptcha-response'))
    <span class="invalid-feedback text-danger" role="alert">
                    <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                </span>
    @endif -->
                        <span class="text-danger" id="captchaError"></span>
                    @endif
                @endif
            </div>

            <div class="form-group @error('agree_terms') is-invalid @enderror">
                <label class="custom-control form-checkbox">
                    <input type="checkbox" class="custom-control-input " value="agreed" name="agree_terms" id="agree_terms">
                    <span class="custom-control-label">{{ lang('I agree with') }} <a href="{{ setting('terms_url') }}"
                            class="text-primary" target="_blank">
                            {{ lang('Terms of services') }}</a></span>
                </label>
            </div>
            <span class="text-red" id="agreetermsError"></span>
            @error('agree_terms')
                <span class="invalid-feedback d-block" role="alert">
                    <strong>{{ lang($message) }}</strong>
                </span>
            @enderror

            <div class="submit">

                <button type="submit" class="btn btn-secondary btn-block"
                    id="register_button">{{ lang('Create Account') }}</button>

            </div>

            <div class="text-center mt-4">
                <p class="text-dark mb-0">{{ lang('Already have an account?') }}<a class="text-primary ms-1"
                        href="{{ url('customer/login') }}">{{ lang('Login', 'menu') }}</a></p>
                <p class="text-dark mb-0"><a class="text-primary ms-1"
                        href="{{ url('/') }}">{{ lang('Send me Back') }}</a></p>

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

@endsection
@section('scripts')
    <!-- Captcha js-->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    <!-- Select2 js -->
    <script src="{{ asset('build/assets/plugins/select2/select2.full.min.js') }}?v=1765889065"></script>


    <link href="{{ asset('build/assets/plugins/select2/select2.min.css') }}?v=1765889065" rel="stylesheet" />

    <script type="text/javascript">
        $(function() {
            "use strict";

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Variables
            var microsoft = "{{ route('social.login', 'microsoft') }}";
            var google = "{{ route('social.login', 'google') }}";
            var envato = "{{ route('social.login', 'envato') }}";

            (function($) {
                $(".captchabtn").on('click', function(e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'GET',
                        url: '{{ route('captcha.reload') }}',
                        success: function(res) {
                            $(".captcha span").html(res.captcha);
                        }
                    });
                });

                $(document).ready(function() {
                    $.ajax({
                        type: 'GET',
                        url: '{{ route('captcha.reload') }}',
                        success: function(res) {
                            $(".captcha span").html(res.captcha);
                        }
                    });
                });

                setTimeout(() => {
                    $('.select2-show-search').select2({
                        minimumResultsForSearch: '',
                        placeholder: "Search",
                        width: '100%'
                    });
                }, 500)

                $('body').on('submit', '#register_form', function(e) {
                    e.preventDefault();
                    let hasError = false;
                    $('#firstnameError').html('');
                    $('#lastnameError').html('');
                    $('#emailError').html('');
                    $('#passwordError').html('');
                    $('#passwordconfirmError').html('');
                    $('#agreetermsError').html('');

                    if(!($('#firstname').val())){
                        $('#firstnameError').html('First Name field is required');
                        hasError = true;
                    }
                    if(!($('#lastname').val())){
                        $('#lastnameError').html('Last Name field is required');
                        hasError = true;
                    }
                    // if(!($('#email').val())){
                    //     $('#emailError').html('Email field is required');
                    //     hasError = true;
                    // }
                    if(!($('#password').val())){
                        $('#passwordError').html('Password field is required');
                        hasError = true;
                    }
                    if(!($('#password_confirmation').val())){
                        $('#passwordconfirmError').html('Confirm Password field is required');
                        hasError = true;
                    }
                    if (!$('input[name="agree_terms"]').prop('checked')) {
                        $('#agreetermsError').html('Terms and conditions field is required.');
                        hasError = true;
                    }
                    if (document.querySelector('[id^="custom_"]')) {
                        document.querySelectorAll('[id^="custom_"]').forEach((ele) => {
                            ele.innerHTML = ''
                        })
                    }
                    $('input[name^="custom_"], textarea[name^="custom_"], select[name^="custom_"], input[type="checkbox"][name^="custom_"], input[type="radio"][name^="custom_"]').each(function() {
                        var fieldName = $(this).attr('name');
                        var sanitizedFieldName = fieldName.replace(/\[\]/g, '');
                        var fieldRequired = $(this).data('required');
                        if (fieldRequired == 1) {
                            if ($(this).is('input[type="text"], textarea, select,input[type="email"]') && !$(this).val().trim()) {
                                $('#' + fieldName + 'Error').html('This field is required');
                                hasError = true;
                            }
                            if ($(this).is('input[type="checkbox"]')) {
                                var checkboxes = $('input[type="checkbox"][name^="' + fieldName + '"]');
                                if (!checkboxes.is(':checked')) {
                                    $('#' + sanitizedFieldName + 'Error').html('At least one option must be selected');
                                    hasError = true;
                                } else {
                                    $('#' + sanitizedFieldName + 'Error').html('');
                                }
                            }
                            if ($(this).is('input[type="radio"]') && !$('input[name="' + fieldName + '"]:checked').length) {
                                $('#' + fieldName + 'Error').html('This field is required');
                                hasError = true;
                            }
                            if ($(this).is('input[type="email"]') && $(this).val().trim() && !/^[\w\.-]+@[\w\.-]+\.[a-zA-Z]{2,}$/.test($(this).val().trim())) {
                                $('#' + fieldName + 'Error').html('Please enter a valid email address');
                                hasError = true;
                            }
                        }
                    });
                    if(hasError)
                    {
                        return;
                    }

                    $('#register_button').html(`Loading.. <i class="fa fa-spinner fa-spin"></i>`);
                    $('#register_button').prop('disabled', true);


                    var formData = new FormData(this);
                    let checked = document.querySelectorAll('.required:checked').length;
                    var isValid = checked > 0;
                    if (document.querySelectorAll('.required').length == '0') {
                        ajax(formData);
                    } else {

                        if (isValid) {
                            ajax(formData);
                        } else {
                            $('#register_button').prop('disabled', false);
                            $('#register_button').html(`{{ lang('Create Ticket', 'menu') }}`);
                            toastr.error('{{ lang('Check the all field(*) required', 'alerts') }}')
                        }
                    }
                });


                function ajax(formData) {

                    $.ajax({
                        type: 'POST',
                        dataType: "json",
                        url: "{{ route('auth.register') }}",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,

                        success: (data) => {
                            if (data.error) {
                                toastr.error(data.error);
                            }
                            if (data.success) {
                                toastr.success(data.success);
                                window.location.replace('{{ url('customer/login') }}')
                            }


                        },
                        error: function(data) {

                            if (data.error) {
                                toastr.error(data.error);
                            }
                            if (data.responseJSON && data.responseJSON.errors) {
                                if (data.responseJSON.errors["g-recaptcha-response"]) {
                                    $('#capchaError').html(data.responseJSON.errors[
                                        "g-recaptcha-response"][0]);
                                }
                                $('#firstnameError').html(data.responseJSON.errors.firstname);
                                $('#lastnameError').html(data.responseJSON.errors.lastname);
                                $('#emailError').html(data.responseJSON.errors.email);
                                $('#passwordError').html(data.responseJSON.errors.password);
                                $('#passwordconfirmError').html(data.responseJSON.errors
                                    .password_confirmation);
                                $('#agreetermsError').html(data.responseJSON.errors.agree_terms);
                                $('#register_button').prop('disabled', false);
                                $('#register_button').html(`{{ lang('Create Account', 'menu') }}`);
                            }
                        }
                    });
                }

            })(jQuery);
        })
    </script>
@endsection