@extends('layouts.app')
@section('title', 'Notification History')

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Notification History</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Notification History</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-end">

                        </div>
                        <div class="card-body">
                            <table id="notificationPreferenceTable" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Title</th>
                                        <th>Status</th>
                                        <th>Created At</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            let table = $('#notificationPreferenceTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('notification.list') }}",
                columns: [{
                        data: 'notification_history_id',
                        name: 'notification_history_id',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },

                    {
                        data: 'status',
                        name: 'status',
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                    }
                ]
            });

            // Delete handler (like your reference)
            $(document).on('click', '.delete-btn', function(e) {
                e.preventDefault();
                var deleteUrl = $(this).data('url');
                var rowId = $(this).data('id');

                // You can define deleteCode globally or reuse from your common.js/custom.js
                deleteCode(deleteUrl, rowId, '#notificationPreferenceTable');
            });
        });
    </script>
@endsection