@extends('layouts.admin')
@section('page-title')
    {{ __('Manage Banners') }}
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="float-end">
                <a href="#" data-size="md" data-url="{{ route('admin.banners.create') }}" data-ajax-popup="true"
                    data-title="{{ __('Add New Banner') }}" class="btn btn-sm btn-primary">
                    <i class="ti ti-plus"></i> {{ __('Add Banner') }}
                </a>
            </div>
            <h4>{{ __('Banner List') }}</h4>
        </div>
        <div class="table-responsive card-body">
            <table id="bannerTable" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Image</th>
                        <th>Title</th>
                        <th>URL</th>
                        <th>Status</th>
                        <th>Order</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@push('script-page')
    <script>
        $(document).ready(function() {
            const table = $('#bannerTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.banners.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'image',
                        name: 'image',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'url',
                        name: 'url'
                    },
                    {
                        data: 'is_active',
                        name: 'is_active'
                    },
                    {
                        data: 'sort_order',
                        name: 'sort_order'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // $(document).on('click', '.delete-btn', function() {
            //     if (confirm('Delete this banner?')) {
            //         let id = $(this).data('id');
            //         $.ajax({
            //             url: "{{ url('admin/banners') }}/" + id + "/destroy",
            //             type: 'DELETE',
            //             data: {
            //                 _token: '{{ csrf_token() }}'
            //             },
            //             success: function() {
            //                 table.ajax.reload();
            //             }
            //         });
            //     }
            // });
        });
    </script>
@endpush