@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\EventSponsorshipPackage::class)
                        <x-buttons.create-small name="event-sponsorship-package" :route="route('event-sponsorship-package.create')" />
                    @endcan
                    <x-buttons.refresh-small name="event-sponsorship-package" />
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-sm table-hover table-striped align-middle" id="table-event-sponsorship-package">
                        <thead>
                            <tr>
                                <th>{{ __('validation.attributes.name') }}</th>
                                <th>{{ __('module.event') }}</th>
                                <th>{{ __('validation.attributes.price') }}</th>
                                <th>{{ __('validation.attributes.currency') }}</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-sponsorship-package').DataTable({
        ajax: { url: '{{ route('datatable.event-sponsorship-package-index') }}' },
        serverSide: true,
        order: [[0, 'asc']],
        columns: [
            { data: 'name', name: 'name' },
            { data: 'event', name: 'event.title', orderable: false },
            { data: 'price', name: 'price' },
            { data: 'currency', name: 'currency' },
            { data: 'is_available', name: 'is_available' },
            { 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-sponsorship-package'));
            $('#datatable-toolbar3').prepend($('#btn-refresh-event-sponsorship-package'));
        },
    });

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