@extends('admin.layouts.master')
@section('title', __('google_recaptcha_settngs'))
@section('content')
    <div class="container-fluid">
        <div class="row justify-content-md-center">
            <div class="col col-lg-6 col-md-8">
                <h3 class="section-title">{{ __('google_recaptcha_settngs') }}</h3>
                <div class="default-tab-list default-tab-list-v2 bg-white redious-border p-20 p-sm-30">
                    <form id="recaptcha-settings-form" action="{{ route('admin.setting.update', ['type' => 'recaptcha']) }}"
                        method="POST">
                        @csrf
                        <div class="d-flex gap-12 sandbox_mode_div mb-4">
                            <input type="hidden" name="is_recaptcha_activated"
                                value="{{ get_config('is_recaptcha_activated') == 1 ? 1 : 0 }}">
                            <label class="form-label"
                                for="is_recaptcha_activated">{{ __('is_recaptcha_activated') }}</label>
                            <div class="setting-check">
                                <input type="checkbox" value="1" id="is_recaptcha_activated" class="sandbox_mode" {{
        get_config('is_recaptcha_activated') == 1 ? 'checked' : '' }}>
                                <label for="is_recaptcha_activated"></label>
                            </div>
                        </div>

                        <div class="mb-2">
                            <label for="recaptcha_site_key" class="form-label">{{ __('recaptcha_site_key') }}</label>
                            <input type="text" class="form-control rounded-2" id="recaptcha_site_key"
                                name="recaptcha_site_key" value="{{ isDemoMode()? '' : get_config('recaptcha_site_key') }}"
                                placeholder="{{ __('recaptcha_site_key') }}">
                            <div class="nk-block-des text-danger">
                                <p class="error">{{ $errors->first('recaptcha_site_key') }}</p>
                            </div>
                        </div>

                        <div class="mb-2">
                            <label for="recaptcha_secret_key" class="form-label">{{ __('recaptcha_secret_key') }}</label>
                            <input type="text" class="form-control rounded-2" id="recaptcha_secret_key"
                                name="recaptcha_secret_key" value="{{ isDemoMode()? '' : get_config('recaptcha_secret_key') }}"
                                placeholder="{{ __('recaptcha_secret_key') }}">
                            <div class="nk-block-des text-danger">
                                <p class="error">{{ $errors->first('recaptcha_secret_key') }}</p>
                            </div>
                        </div>

                        <p class="text-muted small mb-2">{{ __('recaptcha_enable_instructions') }}</p>
                        <div id="admin_recaptcha_widget" class="mb-3"></div>

                        <input type="hidden" id="js_recaptcha_msg_keys" value="{{ __('recaptcha_keys_required_to_enable') }}">
                        <input type="hidden" id="js_recaptcha_msg_challenge"
                            value="{{ __('recaptcha_complete_challenge_to_enable') }}">

                        <div class="form-group">
                            <button type="submit" class="btn sg-btn-primary">{{ __('save_changes') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://www.google.com/recaptcha/api.js?onload=adminRecaptchaSettingsOnload&render=explicit" async
        defer></script>
    <script>
        (function($) {
            "use strict";
            var adminRecaptchaWidgetId = null;
            var renderTimer = null;

            function renderAdminRecaptchaWidget() {
                if (typeof grecaptcha === "undefined") {
                    return;
                }
                var sitekey = $.trim($("#recaptcha_site_key").val());
                $("#admin_recaptcha_widget").empty();
                adminRecaptchaWidgetId = null;
                if (!sitekey) {
                    return;
                }
                try {
                    adminRecaptchaWidgetId = grecaptcha.render("admin_recaptcha_widget", {
                        sitekey: sitekey
                    });
                } catch (err) {
                    adminRecaptchaWidgetId = null;
                }
            }

            function scheduleRender() {
                clearTimeout(renderTimer);
                renderTimer = setTimeout(renderAdminRecaptchaWidget, 400);
            }

            window.adminRecaptchaSettingsOnload = function() {
                renderAdminRecaptchaWidget();
            };

            $(function() {
                $("#recaptcha_site_key").on("change keyup blur", scheduleRender);

                $("#recaptcha-settings-form").on("submit", function(e) {
                    var enabled = String($('input[name="is_recaptcha_activated"]').val()) === "1";
                    var sitekey = $.trim($("#recaptcha_site_key").val());
                    var secret = $.trim($("#recaptcha_secret_key").val());
                    if (enabled) {
                        if (!sitekey || !secret) {
                            e.preventDefault();
                            var msg1 = $("#js_recaptcha_msg_keys").val() || "";
                            if (typeof toastr !== "undefined") {
                                toastr.error(msg1);
                            } else {
                                alert(msg1);
                            }
                            return false;
                        }
                        if (adminRecaptchaWidgetId === null) {
                            renderAdminRecaptchaWidget();
                        }
                        if (typeof grecaptcha === "undefined" || !grecaptcha.getResponse(adminRecaptchaWidgetId)) {
                            e.preventDefault();
                            var msg2 = $("#js_recaptcha_msg_challenge").val() || "";
                            if (typeof toastr !== "undefined") {
                                toastr.error(msg2);
                            } else {
                                alert(msg2);
                            }
                            return false;
                        }
                    }
                });
            });
        })(jQuery);
    </script>
@endpush