@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\EventSponsorRegistration::class)
                        <x-buttons.create-small name="event-sponsor-registration" :route="route('event-sponsor-registration.create')" />
                    @endcan
                    <x-buttons.refresh-small name="event-sponsor-registration" />
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-sm table-hover table-striped align-middle" id="table-event-sponsor-registration">
                        <thead>
                            <tr>
                                <th>{{ __('validation.attributes.company_name') }}</th>
                                <th>{{ __('module.event') }}</th>
                                <th>{{ __('module.event-sponsorship-package') }}</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 tableReg = $('#table-event-sponsor-registration').DataTable({
            ajax: { url: '{{ route('datatable.event-sponsor-registration-index') }}' },
            serverSide: true,
            order: [[0, 'desc']],
            columns: [
                { data: 'company_name', name: 'company_name' },
                { data: 'event', name: 'event.title', defaultContent: '-', orderable: false },
                { data: 'package', name: 'package.name', defaultContent: '-', orderable: false },
                { data: 'status', name: 'status', orderable: false },
                { data: 'created_at', name: 'created_at' },
                { data: 'updated_at', name: 'updated_at' },
                { data: 'action', name: 'action', orderable: false, searchable: false, className:'text-nowrap' }
            ],
            drawCallback: function () {
                $('button[data-delete-confirm="1"]').on('click', function () {
                    deleteConfirm($(this).data('delete-route'), $(this).data('delete-id'), tableReg)
                })
            },
            initComplete: function () {
                $('#datatable-toolbar2').prepend($('#btn-create-event-sponsor-registration'));
                $('#datatable-toolbar3').prepend($('#btn-refresh-event-sponsor-registration'));
            }
        });

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