@extends('backend.layout.master-tailwind')
@section('title', __('Recaptcha Settings'))

@section('admin_styles')
<style>
.field-label {
    display: block;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 6px;
    font-weight: 500;
}
</style>
@endsection

@section('content')

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Recaptcha Settings') }}</h1>
      <p class="page-sub">{{ __('Google reCAPTCHA keys for the registration page') }}</p>
    </div>
  </div>

  <div style="max-width:560px">
    <div class="card" style="padding:24px">

      @if($errors->any())
      <div style="background:color-mix(in oklch,var(--danger,#ef4444) 8%,transparent);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--danger,#ef4444);display:flex;flex-direction:column;gap:4px;margin-bottom:18px">
        @foreach($errors->all() as $error)
        <div>{{ $error }}</div>
        @endforeach
      </div>
      @endif

      <form action="{{ route('admin.page.settings.register.recaptcha') }}" method="POST" style="display:flex;flex-direction:column;gap:16px">
        @csrf

        <div>
          <label class="field-label" for="recaptcha_site_key">{{ __('Recaptcha Site Key') }}</label>
          <input class="input wide" type="text" id="recaptcha_site_key" name="recaptcha_site_key"
            value="{{ get_static_option('recaptcha_site_key') ?? '' }}"
            placeholder="{{ __('Enter your reCAPTCHA site key') }}">
        </div>

        <div>
          <label class="field-label" for="recaptcha_secret_key">{{ __('Recaptcha Secret Key') }}</label>
          <input class="input wide" type="text" id="recaptcha_secret_key" name="recaptcha_secret_key"
            value="{{ get_static_option('recaptcha_secret_key') ?? '' }}"
            placeholder="{{ __('Enter your reCAPTCHA secret key') }}">
        </div>

        <div>
          <button type="submit" class="btn primary sm">{{ __('Update') }}</button>
        </div>

      </form>

    </div>
  </div>

</div>

@endsection