@php($isRequired = (bool) ($field['required'] ?? true))
<div class="admin-config-row" data-checkout-field-row>
    <input type="hidden" name="checkout_fields[{{ $index }}][_delete]" value="0" data-config-delete-input>
    <div class="admin-config-row-header">
        <strong data-config-row-title>Field Checkout</strong>
        <button type="button" class="admin-config-remove-button" data-remove-config-row>Hapus</button>
    </div>

    <div class="admin-form-grid">
        <div class="admin-form-group">
            <label class="admin-form-label">Key <span>*</span></label>
            <input type="text" name="checkout_fields[{{ $index }}][key]" value="{{ $field['key'] ?? '' }}" maxlength="50" pattern="[a-z][a-z0-9_]*" class="admin-form-control font-figures" placeholder="username_roblox">
            <p class="admin-form-help">Huruf kecil, angka, dan underscore. Jangan diubah setelah produk menerima order.</p>
        </div>
        <div class="admin-form-group">
            <label class="admin-form-label">Label <span>*</span></label>
            <input type="text" name="checkout_fields[{{ $index }}][label]" value="{{ $field['label'] ?? '' }}" maxlength="80" class="admin-form-control" placeholder="Username Roblox">
        </div>
    </div>

    <div class="admin-form-grid">
        <div class="admin-form-group">
            <label class="admin-form-label">Tipe Field</label>
            <select name="checkout_fields[{{ $index }}][type]" class="admin-form-control">
                @foreach (['text' => 'Teks', 'number' => 'Angka', 'email' => 'Email', 'whatsapp' => 'WhatsApp'] as $value => $label)
                    <option value="{{ $value }}" @selected(($field['type'] ?? 'text') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div class="admin-form-group">
            <label class="admin-form-label">Maksimal Karakter</label>
            <input type="number" name="checkout_fields[{{ $index }}][max_length]" value="{{ $field['max_length'] ?? 100 }}" min="1" max="500" class="admin-form-control font-figures">
        </div>
    </div>

    <div class="admin-form-group">
        <label class="admin-form-label">Placeholder</label>
        <input type="text" name="checkout_fields[{{ $index }}][placeholder]" value="{{ $field['placeholder'] ?? '' }}" maxlength="120" class="admin-form-control" placeholder="Masukkan username Roblox">
    </div>

    <label class="admin-form-switch-card admin-config-switch-card">
        <input type="hidden" name="checkout_fields[{{ $index }}][required]" value="0">
        <input type="checkbox" name="checkout_fields[{{ $index }}][required]" value="1" @checked($isRequired)>
        <span class="admin-form-switch"><span></span></span>
        <span class="admin-form-switch-content"><strong>Wajib diisi</strong><small>Checkout ditolak bila customer tidak mengisi field ini.</small></span>
    </label>
</div>