@use('App\Models\AutoNumber')
@extends('layouts.main')
@include('layouts.datatables')
@include('layouts.form-scripts')
@include('layouts.components.confirm-reset')
@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    {{ $title }}
                </div>
                <div class="d-none">
                    <x-buttons.refresh-small name="auto_number" />
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover table-striped align-middle" id="table-auto-number">

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <x-modals.form-auto-number name="number" />
@endsection

@push('scripts')
    <script type="module">
        $(document).ready(function () {
            // Make DataTables show all records by default (no paging)
            const tableAutoNumber = $('#table-auto-number').DataTable({
                ajax: {
                    url: @json(route('datatable.auto-number-index')),
                },
                serverSide: false,
                order: [[0, 'desc']],
                paging: false,
                info: false,
                columns: [
                    {
                        data: 'id',
                        searchable: false,
                        visible: false,
                    }, {
                        title: '{{ __('validation.attributes.type') }}',
                        data: 'type_translate',
                        className: 'text-nowrap',
                        searchable: false,

                    }, {
                        title: '{{ __('validation.attributes.action') }}',
                        data: 'action',
                        searchable: false,
                        orderable: false,
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('validation.attributes.format') }}',
                        data: 'format',
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('validation.attributes.sequence') }}',
                        data: 'sequence',
                        className: 'text-nowrap text-center',
                    }, {
                        title: '{{ __('general.example') }}',
                        data: 'example',
                        searchable: false,
                        orderable: false,
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('validation.attributes.updated_by') }}',
                        data: 'updated_at',
                        className: 'text-nowrap',
                    },
                ],
                drawCallback: function () {
                    $('button[data-reset-confirm="1"]').on('click', function () {
                        resetConfirm($(this).data('reset-route'), $(this).data('reset-id'), tableAutoNumber)
                    })
                    $('button[data-edit-using-form="1"]').on('click', function (e) {
                        $('#modal-title-auto-number').text('{{ __('general.update') . ' ' . __('general.auto_number') }}');
                        $('#modal-auto-number').attr('data-auto-number', JSON.stringify(tableAutoNumber.row(e.target.closest('tr')).data()));
                        $('#modal-auto-number').attr('data-url', $(this).data('route-update'));
                        bootstrap.Modal
                            .getOrCreateInstance($('#modal-auto-number'), {})
                            .show();
                    })
                },
                initComplete: function () {
                    $('#datatable-toolbar3').prepend($('#btn-refresh-auto-number'));
                },
            })

            $('#btn-refresh-auto-number').on('click', function () {
                tableAutoNumber.draw();
            })

            $('#modal-auto-number').on('hide.bs.modal', function () {
                tableAutoNumber.draw();
            });
        })
    </script>
@endpush