@props([
    'name' => 'form_number',
])

@push('modal')
<div class="modal fade" id="modal-auto-{{ Str::slug($name) }}" tabindex="-1" aria-labelledby="modal-title-auto-{{ Str::slug($name) }}" aria-hidden="true" data-auto-number="" data-url="">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title-auto-{{ Str::slug($name) }}">{{ __('validation.attributes.' . $name)}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="form-auto-{{ Str::slug($name) }}" method="POST">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-8">
                            <table class="table table-sm p-1" style="font-size: 0.8em">
                                <tr>
                                    <th class="text-center fw-bold p-1">{{ __('validation.attributes.code') }}</th>
                                    <th class="text-center p-1">{{ __('validation.attributes.description') }}</th>
                                </tr>
                                @php
                                    $infoArray = \Illuminate\Support\Facades\Lang::get('info-table.autonumber');
                                @endphp
                                @foreach($infoArray as $key => $val)
                                    <tr>
                                        <td class="text-center fw-bold p-1">{{ $key }}</td>
                                        <td class="p-1">{!! $val !!}</td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                        <div class="col-12 col-sm-4">
                            <div class="row">
                                @csrf
                                @method('PUT')
                                <div class="col-12">
                                    <x-forms.input-text :label="__('validation.attributes.format')" name="format" required />
                                </div>
                                <div class="col-12">
                                    <x-forms.input-text :label="__('validation.attributes.sequence')" class="inputmask-numeric" name="sequence" required />
                                </div>
                                <div class="col-12">
                                    <div class="my-2">
                                        <button type="button" id="btn-example-auto-{{ Str::slug($name) }}" class="btn btn-alt-info">{{ __('general.example') }}</button>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-2">
                                        <input type="text" id="input-example-auto-{{ Str::slug($name) }}" class="form-control" readonly value="{{ $autoNumber->example ?? '' }}" />
                                    </div>
                                </div>
                            </div>
                            <hr/>
                            <div class="row">
                                <div class="col-12 text-end">
                                    <button type="button" id="btn-dismiss-auto-{{ Str::slug($name) }}" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{{ __('general.close') }}</button>
                                    <button type="submit" id="btn-save-auto-{{ Str::slug($name) }}" class="btn btn-sm btn-primary">
                                        <i class="fa fa-save me-1"></i>{{ __('general.save') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush

@push('scripts')
    <script type="module">
        let autoNumber = {};
        let autoNumberUpdateUrl = '';

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

        $(document).ready(function () {
            $('#modal-auto-{{ Str::slug($name) }}').on('show.bs.modal', function () {
                autoNumber = JSON.parse($(this).attr('data-auto-number'));
                autoNumberUpdateUrl = $(this).attr('data-url');
                $('#form-auto-{{ Str::slug($name) }}').find('#input-format').val(autoNumber.format ?? '');
                $('#form-auto-{{ Str::slug($name) }}').find('#input-sequence').val(autoNumber.sequence ?? '');
                $('#input-example-auto-{{ Str::slug($name) }}').val(autoNumber.example ?? '');
            });

            $('#btn-example-auto-{{ Str::slug($name) }}').on('click', function () {
                autoNumber.format = $('#form-auto-{{ Str::slug($name) }}').find('#input-format').val();
                autoNumber.sequence = $('#form-auto-{{ Str::slug($name) }}').find('#input-sequence').val();
                getAutoNumber();
            });

            $('#form-auto-{{ Str::slug($name) }}').on('submit', function (e) {
                e.preventDefault();

                $('#btn-save-auto-{{ Str::slug($name) }}')
                    .attr('disabled', true)
                    .html(`<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Loading...`)

                $('#form-auto-{{ Str::slug($name) }}').find(':input').removeClass('is-invalid');

                const data = $('#form-auto-{{ Str::slug($name) }}').serializeObject();

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    url: autoNumberUpdateUrl,
                    method: 'PUT',
                    data,
                    dataType: 'json',
                    cache: false,
                    success: function (response) {
                        createToast({
                            color: 'success',
                            icon: 'fa fa-circle-check me-1',
                            message: response.message ?? '{{ __('messages.generic.success') }}'
                        });
                        if (response.data) {
                            autoNumber = response.data
                        }
                        $('#modal-auto-{{ Str::slug($name) }}').attr('data-auto-number', JSON.stringify(autoNumber));
                        bootstrap.Modal.getOrCreateInstance($('#modal-auto-{{ Str::slug($name) }}')).hide();
                    },
                    error: function (e) {
                        if (e.responseJSON?.errors) {
                            let errorMessage = '{{ __('messages.notify.error') }}<ul>';
                            for (const error in e.responseJSON.errors) {
                                errorMessage += '<li>' + e.responseJSON.errors[error][0] + '</li>';
                                $('#input-' + slugify(error)).addClass('is-invalid');
                            }
                            errorMessage += '</ul>';
                            createToast({
                                color: 'danger',
                                icon: 'fa fa-triangle-exclamation me-1',
                                message: errorMessage ?? '{{ __('messages.generic.error') }}'
                            });
                        }
                    },
                    complete: function () {
                        $('#btn-save-auto-{{ Str::slug($name) }}')
                            .removeAttr('disabled')
                            .html('<i class="fa fa-save me-1"></i>{{ __('general.save') }}');
                    }
                });
            });
        });

    </script>
@endpush