@extends('layouts.app')

@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Notification Templates</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Notification List</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <a href="{{ route('notificationTemplates.create') }}" class="btn btn-primary">Add Notification</a>
            </div>
        </div>


        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="notifications-table" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Event</th>
                                <th>Templates</th>
                                {{-- <th>Status</th> --}}
                                {{-- <th>Placeholders</th> --}}
                                {{-- <th>Created</th> --}}
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@include('includes.commonjs')
<script>
$(function() {
    $('#notifications-table').DataTable({
        processing: true,
        serverSide: true,
        order: [
            [2, 'asc']
        ],
        ajax: {
            url: "{{ route('notificationTemplates.index') }}",
        },
        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'name',
                name: 'name'
            },
            {
                data: 'event',
                name: 'event'
            },
            {
                data: 'available_templates',
                name: 'available_templates',
                orderable: false,
                searchable: false
            },
            // {
            //     data: 'status_badge',
            //     name: 'status',
            //     orderable: false,
            //     searchable: false
            // },
            // {
            //     data: 'short_code',
            //     name: 'short_code'
            // },
            // {
            //     data: 'created_at',
            //     name: 'created_at'
            // },
            {
                data: 'actions', 
                name: 'actions',
                orderable: false,
                searchable: false
            },
        ]
    });

    $(document).on('click', '.toggle-status', function() {
        const btn = $(this);
        const id = btn.data('id');
        const action = btn.data('action');

        btn.prop('disabled', true);

        $.ajax({
            url: "{{ route('notificationTemplates.bulk-action') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                ids: [id],
                action: action
            },
            success: function(res) {
                $('#notifications-table').DataTable().ajax.reload(null, false);
            },
            error: function(xhr) {
                alert(xhr.responseJSON?.message || 'Unable to update status.');
            },
            complete: function() {
                btn.prop('disabled', false);
            }
        });
    });
});
</script>
@endsection