@extends('admin.templates.layout')

@section('head')
    <link rel="stylesheet" href="{{ asset('admin_assets/assets/css/jquery.dataTables.min.css') }}">
    <style>
        #dataTable thead th {
            font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
            color: #64748b; font-weight: 600; background: #f8fafc; white-space: nowrap;
        }
        #dataTable td { font-size: 13px; vertical-align: middle; }

        .notif-thumb {
            width: 42px; height: 42px; border-radius: 8px;
            object-fit: cover; border: 1px solid #e2e8f0;
            flex-shrink: 0;
        }
    </style>
@endsection

@section('content')
    <div class="row"><div class="col-lg-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center py-3 border-bottom">
                <div>
                    <h5 class="card-title mb-0">{{ $page_heading }}</h5>
                    <p class="text-muted small mb-0">Broadcast and targeted push notifications</p>
                </div>
                <a href="{{ route('admin.notifications.create') }}" class="btn btn-primary btn-sm">
                    <i class="ri-send-plane-line me-1"></i> Send Notification
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-nowrap table-hover align-middle" id="dataTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Notification</th>
                                <th>Type</th>
                                <th>Target</th>
                                <th>Status</th>
                                <th>Order</th>
                                <th>Sent</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div></div>
@endsection

@section('script')
    <script src="{{ asset('admin_assets/assets/js/jquery.dataTables.min.js') }}"></script>
    <script>
        $(function () {
            const table = $('#dataTable').DataTable({
                processing: true, serverSide: true,
                ajax: '{{ route("admin.notifications.list") }}',
                columns: [
                    { data: 'DT_RowIndex', searchable: false, orderable: false, width: '40px' },
                    { data: 'title_col',   name: 'title' },
                    { data: 'type_col',    searchable: false, orderable: false },
                    { data: 'target_col',  searchable: false, orderable: false },
                    { data: 'status_col',  searchable: false, orderable: false },
                    { data: 'order_col',   searchable: false, orderable: false },
                    { data: 'sent_at',     name: 'created_at' },
                    { data: 'action',      searchable: false, orderable: false, className: 'text-end' }
                ],
                order: [[6, 'desc']],
                pageLength: 15,
                language: {
                    processing: '<div class="spinner-border spinner-border-sm text-primary" role="status"></div>',
                    emptyTable: '<div class="text-center py-4 text-muted">No notifications sent yet</div>',
                    zeroRecords: '<div class="text-center py-4 text-muted">No matching notifications</div>',
                    info: 'Showing _START_ to _END_ of _TOTAL_',
                    paginate: { previous: '‹', next: '›' }
                }
            });

            /* ═══ Delete — Swal confirmation ═══ */
            $(document).on('click', '.delete-notification', function () {
                const id = $(this).data('id');

                Swal.fire({
                    title: 'Delete this notification?',
                    text: 'This action cannot be undone.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#dc2626',
                    cancelButtonColor: '#64748b',
                }).then(function (result) {
                    if (!result.isConfirmed) return;

                    $.ajax({
                        url: '{{ url("admin/notifications") }}/' + id,
                        type: 'POST',
                        data: { _token: '{{ csrf_token() }}', _method: 'DELETE' },
                        success: function (res) {
                            if (res.status === 'success') {
                                toastr.success(res.message || 'Notification deleted');
                                table.ajax.reload(null, false);
                            } else {
                                toastr.error(res.message || 'Failed to delete');
                            }
                        },
                        error: function (xhr) {
                            toastr.error(xhr.responseJSON?.message || 'Failed to delete');
                        },
                    });
                });
            });
        });
    </script>
@endsection