@use('App\Models\AutoNumber')
@props([
    'name' => 'form_number',
    'label' => $name ?? '',
    'type' => $name ?? '',
    'dateInputId' => '',
    'required' => false,
    'value' => null,
    'useLabel' => true,
    'readonly' => false,
    'isFormCreate' => false,
])
@php
    $autoNumber = AutoNumber::where('type', '=', $type)->first();
@endphp
<div class="input-group mb-2">
    <div class="form-floating">
        <input {{ $attributes->class(['form-control', 'is-invalid' => $errors->has($name)]) }} id="input-{{ Str::slug($name) }}" type="text" name="{{ $name }}" value="{{ old($name, $value) }}" placeholder="{{ $useLabel ? '' : $label }}" {{ $readonly ? 'readonly tabindex=-1' : '' }} @required($required) />
        @if($useLabel)
            <label class="form-label" for="{{ $name }}">{{ $label }}
                @if($required)
                    <span class="text-danger">*</span>
                @endif
            </label>
        @endif
    </div>
    @if($autoNumber)
        <button type="button" class="btn btn-outline-success" id="btn-refresh-{{ Str::slug($name) }}">
            <i class="fa fa-refresh"></i>
        </button>
    @endif
    @can('update', $autoNumber)
        <button type="button" class="btn btn-outline-primary" id="btn-update-auto-{{ Str::slug($name) }}" data-route-update="{{ route('auto-number.update', $autoNumber) }}" data-type="{{ $autoNumber->type ?? '' }}">
            <i class="fa fa-edit"></i>
        </button>
    @endcan
</div>
@error($name)
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror

@can('update', $autoNumber)
    @push('modal')
        <x-modals.form-auto-number :name="$name" />
    @endpush
@endcan
@push('scripts')
    <script type="module">
        const autoNumber = {
            type: @json($type),
            dateElement: $(@json($dateInputId)),
            isFormCreate: @json($isFormCreate),
            data: @json($autoNumber),
            url: '{{ $autoNumber ? route('auto-number.update', $autoNumber) : '' }}'
        }

        const getAutoNumber = function () {
            $.ajax({
                method: 'GET',
                url: @json(route('auto-number.get')),
                data: {
                    type: autoNumber.type,
                    date: autoNumber.dateElement.length ? autoNumber.dateElement.val() : null,
                },
                success: function (res) {
                    if (res.length) {
                        $('#input-{{ Str::slug($name) }}').val(res).addClass('active');
                    }
                },
                error: function (e) {
                    createToast({
                        color: 'danger',
                        icon: 'fa fa-triangle-exclamation me-1',
                        message: e.responseJSON?.message ?? '{{ __('messages.generic.error') }}'
                    });
                }
            });
        }

        $(document).ready(function () {
            $('#btn-refresh-{{ Str::slug($name) }}').on('click', function () {
                getAutoNumber();
            });

            $('#btn-update-auto-{{ Str::slug($name) }}').on('click', function () {
                $('#modal-auto-{{ Str::slug($name) }}').attr('data-auto-number', JSON.stringify(autoNumber.data));
                $('#modal-auto-{{ Str::slug($name) }}').attr('data-url', autoNumber.url);
                bootstrap.Modal
                    .getOrCreateInstance($('#modal-auto-{{ Str::slug($name) }}'), {})
                    .show();
            });

            $('#modal-auto-{{ Str::slug($name) }}').on('hide.bs.modal', function () {
                autoNumber.data = JSON.parse($(this).attr('data-auto-number'));
                if (autoNumber.isFormCreate) {
                    getAutoNumber();
                }
            });

            if (autoNumber.isFormCreate) {
                $('#btn-refresh-{{ Str::slug($name) }}').trigger('click');
            }
        });
    </script>
@endpush