@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\Event::class)
                        <x-buttons.create-small name="event" :route="route('event.create')" />
                    @endcan
                    <x-buttons.refresh-small name="event" />
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-sm table-hover table-striped align-middle" id="table-event">
                        <thead>
                            <tr>
                                <th>{{ __('validation.attributes.title') }}</th>
                                <th>{{ __('general.category') }}</th>
                                <th>{{ __('validation.attributes.date') }}</th>
                                <th>{{ __('validation.attributes.is_active') }}</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 tableEvent = $('#table-event').DataTable({
            ajax: { url: '{{ route('datatable.event-index') }}' },
            serverSide: true,
            order: [[0, 'desc']],
            columns: [
                { data: 'title', name: 'title' },
                {
                    data: 'category',
                    name: 'category.name',
                    orderable: false
                },
                { data: 'date', name: 'date', render: function(d){ return d ? moment(d).format('DD-MMM-YYYY') : ''; } },
                { data: 'is_active', name: 'is_active', orderable: false },
                { 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'), tableEvent)
                })
            },
            initComplete: function () {
                $('#datatable-toolbar2').prepend($('#btn-create-event'));
                $('#datatable-toolbar3').prepend($('#btn-refresh-event'));
            }
        });

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