@php
    $groups = \App\Models\GroupCharity::active()->get();
@endphp
<form id="extra-register-form" method="POST" action="{{ route('register.extra') }}">
    @csrf
    <div class="mb-4">
        <label for="real_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200">
            {{ __('Real Name / Nama Asli') }}
        </label>
        <input type="text" name="real_name" id="real_name" required
            class="mb-2 px-3 py-2 border rounded-lg w-full dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100"
            placeholder="{{ __('Enter your real name') }}" />
    </div>

    <div class="mb-4">
        <label for="group_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200">
            {{ __('Choose Group / Pilih Grup') }}
        </label>
        <select name="group_id" id="group_id" required
            class="mb-2 px-3 py-2 border rounded-lg w-full dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100">
            <option value="">{{ __('-- Select Group --') }}</option>
            @foreach ($groups as $group)
                <option value="{{ $group->id }}">{{ $group->name }}</option>
            @endforeach
        </select>
    </div>

    <button type="submit"
        class="text-green-800 bg-transparent border border-green-800 hover:bg-green-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-lg px-4 py-2 text-center dark:hover:bg-green-300 dark:border-green-300 dark:text-green-300 dark:hover:text-gray-800 dark:focus:ring-green-800">
        <i class="fa-solid fa-right-from-bracket"></i> {{ __('Continue') }}
    </button>
</form>