@php
$str_random = strtoupper(Str::random(7));
@endphp

<div class="flex flex-col gap-2">
    <dt class="text-sm font-medium text-gray-500">
        {{ $label }}
    </dt>
    <dd class="text-sm text-gray-900 sm:col-span-2 sm:mt-0">
        @isset($html)
            @if ($html)
                <input type="{{ isset($type) ? $type : 'text' }}" class="input-generate-{{ $str_random }} w-full rounded border border-gray-200 px-4 py-2" name="{{ $name }}" value="{!! $value !!}"
                    placeholder="{{ isset($placeholder) ? $placeholder : '' }}" {{ isset($readonly) ? 'readonly' : '' }} />
            @else
                <input type="{{ isset($type) ? $type : 'text' }}" class="input-generate-{{ $str_random }} w-full rounded border border-gray-200 px-4 py-2" name="{{ $name }}" value="{{ $value }}"
                    placeholder="{{ isset($placeholder) ? $placeholder : '' }}" {{ isset($readonly) ? 'readonly' : '' }} />
            @endif
        @else
            <div class="flex">
                <input type="{{ isset($type) ? $type : 'text' }}" class="input-generate-{{ $str_random }} grow rounded-l border border-gray-200 px-4 py-2" name="{{ $name }}" value="{{ $value }}"
                    placeholder="{{ isset($placeholder) ? $placeholder : '' }}" {{ isset($readonly) ? 'readonly' : '' }} />
                <button type="button" id="btn-generate-{{ $str_random }}" class="rounded-r bg-green-600 px-4 py-2 text-white">
                    สุ่มตัวอักษร
                </button>
            </div>
        @endif
    </dd>
</div>

@push('page_script')
<script>
    $(`#btn-generate-{{ $str_random }}`).on('click', function() {
        $.get('/api/generate-code', {
            length: '{{ isset($length) ? $length : 7 }}'
        }, function(data) {
            $('.input-generate-{{ $str_random }}').val(data)
        })
    })
</script>
@endpush