@extends('layouts.main')
@include('layouts.datatables')
@include('layouts.components.confirm-delete')

@section('title', $title)

@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">
                    @can('create', App\Models\EventCategory::class)
                        <x-buttons.create-small name="event-category" :route="route('event-category.create')" />
                    @endcan
                    <x-buttons.refresh-small name="event-category" />
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-sm table-hover table-striped align-middle" id="table-event-category">
                        <thead>
                        <tr>
                            <th>{{ __('validation.attributes.code') }}</th>
                            <th>{{ __('validation.attributes.name') }}</th>
                            <th>{{ __('validation.attributes.slug') }}</th>
                            <th>{{ __('validation.attributes.status') }}</th>
                            <th>{{ __('validation.attributes.created_at') }}</th>
                            <th>{{ __('validation.attributes.updated_at') }}</th>
                            <th>{{ __('validation.attributes.action') }}</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="module">
    const table = $('#table-event-category').DataTable({
        ajax: { url: '{{ route('datatable.event-category-index') }}' },
        serverSide: true,
        order: [[0, 'asc']],
        columns: [
            { data: 'code', name: 'code' },
            { data: 'name', name: 'name' },
            { data: 'slug', name: 'slug' },
            { data: 'is_active', name: 'is_active' },
            { data: 'created_at', name: 'created_at' },
            { data: 'updated_at', name: 'updated_at' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
        drawCallback: function() {
            $('button[data-delete-confirm="1"]').on('click', function() {
                deleteConfirm($(this).data('delete-route'), $(this).data('delete-id'), table)
            })
        },
        initComplete: function() {
            $('#datatable-toolbar2').prepend($('#btn-create-event-category'));
            $('#datatable-toolbar3').prepend($('#btn-refresh-event-category'));
        },
    });

    $('#btn-refresh-event-category').on('click', function() {
        table.draw();
    });
</script>
@endpush