@extends('layouts.app')

@section('page_title', 'Notifications')

@section('content')
    @include('components.table-component', [
        'pageTitle' => 'Notifications',
        'data' => $notifications ?? [],
        'columns' => [
            ['name' => 'Title', 'key' => 'title', 'sortable' => true],
            ['name' => 'Message', 'key' => 'message', 'sortable' => true],
            ['name' => 'Type', 'key' => 'type', 'sortable' => true],
            ['name' => 'Status', 'key' => 'status', 'sortable' => true],
            ['name' => 'Created At', 'key' => 'created_at', 'sortable' => true],
            ['name' => 'Sent At', 'key' => 'sent_at', 'sortable' => true]
        ],
        'allFields' => [
            ['name' => 'Title', 'key' => 'title', 'type' => 'text', 'required' => true],
            ['name' => 'Message', 'key' => 'message', 'type' => 'textarea', 'required' => true],
            ['name' => 'Type', 'key' => 'type', 'type' => 'select', 'options' => ['Info', 'Warning', 'Success', 'Error'], 'required' => true],
            ['name' => 'Status', 'key' => 'status', 'type' => 'select', 'options' => ['Draft', 'Sent', 'Scheduled'], 'required' => true],
            ['name' => 'Schedule Date', 'key' => 'schedule_date', 'type' => 'datetime-local', 'required' => false, 'showIf' => ['status', 'Scheduled']],
            ['name' => 'Target Users', 'key' => 'target_users', 'type' => 'select', 'options' => ['All Users', 'Selected Users'], 'required' => true],
            ['name' => 'User IDs', 'key' => 'user_ids', 'type' => 'text', 'required' => false, 'showIf' => ['target_users', 'Selected Users'], 'placeholder' => 'Comma-separated user IDs']
        ],
        'actions' => ['edit', 'view', 'delete', 'send'],
        'showAddButton' => true,
        'addButtonUrl' => route('notifications.create'),
        'showCheckboxes' => true,
        'showBatchDelete' => true,
        'showEditModal' => true,
        'showViewModal' => true,
        'baseRoute' => 'notifications'
    ])
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    const dataTable = initializeDataTable({
        route: '{{ route("notifications.data") }}',
        columns: [
            { data: 'title' },
            { 
                data: 'message',
                render: function(data) {
                    return data.length > 50 ? data.substring(0, 50) + '...' : data;
                }
            },
            { 
                data: 'type',
                render: function(data) {
                    const colors = {
                        'Info': 'info',
                        'Warning': 'warning',
                        'Success': 'success',
                        'Error': 'danger'
                    };
                    return `<span class="badge badge-${colors[data] || 'secondary'}">${data}</span>`;
                }
            },
            { 
                data: 'status',
                render: function(data) {
                    const colors = {
                        'Draft': 'secondary',
                        'Sent': 'success',
                        'Scheduled': 'info'
                    };
                    return `<span class="badge badge-${colors[data] || 'secondary'}">${data}</span>`;
                }
            },
            { 
                data: 'created_at',
                render: function(data) {
                    return moment(data).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            { 
                data: 'sent_at',
                render: function(data) {
                    return data ? moment(data).format('YYYY-MM-DD HH:mm:ss') : '-';
                }
            }
        ]
    });

    // Handle form submissions
    handleFormSubmission({
        addRoute: '{{ route("notifications.store") }}',
        editRoute: '{{ route("notifications.update", ":id") }}',
        deleteRoute: '{{ route("notifications.destroy", ":id") }}',
        dataTable: dataTable,
        validation: {
            title: {
                required: true,
                minlength: 3
            },
            message: {
                required: true,
                minlength: 10
            },
            type: {
                required: true
            },
            status: {
                required: true
            },
            schedule_date: {
                required: function() {
                    return $('#status').val() === 'Scheduled';
                },
                date: true,
                min: function() {
                    return moment().format('YYYY-MM-DDTHH:mm');
                }
            },
            target_users: {
                required: true
            },
            user_ids: {
                required: function() {
                    return $('#target_users').val() === 'Selected Users';
                },
                pattern: /^(\d+,)*\d+$/
            }
        },
        customButtons: [
            {
                text: 'Send Now',
                action: function(data) {
                    if (confirm('Are you sure you want to send this notification now?')) {
                        $.ajax({
                            url: '{{ route("notifications.send", ":id") }}'.replace(':id', data.id),
                            type: 'POST',
                            success: function(response) {
                                toastr.success('Notification sent successfully');
                                dataTable.ajax.reload();
                            },
                            error: function(xhr) {
                                toastr.error('Failed to send notification');
                            }
                        });
                    }
                },
                visible: function(data) {
                    return data.status === 'Draft' || data.status === 'Scheduled';
                }
            }
        ]
    });

    // Handle conditional fields
    $(document).on('change', '#status', function() {
        const scheduleDateGroup = $('#schedule_date').closest('.form-group');
        if ($(this).val() === 'Scheduled') {
            scheduleDateGroup.show();
        } else {
            scheduleDateGroup.hide();
        }
    });

    $(document).on('change', '#target_users', function() {
        const userIdsGroup = $('#user_ids').closest('.form-group');
        if ($(this).val() === 'Selected Users') {
            userIdsGroup.show();
        } else {
            userIdsGroup.hide();
        }
    });
});
</script>
@endpush

@push('styles')
<style>
.badge {
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
}
</style>
@endpush