@extends('includes.layout')

@section('main-page-content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Push Notification Test Page</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Send Test Notification</h5>
                                </div>
                                <div class="card-body">
                                    <form id="test-notification-form">
                                        @csrf
                                        <div class="mb-3">
                                            <label for="title" class="form-label">Notification Title</label>
                                            <input type="text" class="form-control" id="title" name="title" value="Test Notification" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="description" class="form-label">Notification Description</label>
                                            <textarea class="form-control" id="description" name="description" rows="3" required>This is a test notification from the HRM system.</textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label for="receiver_id" class="form-label">Receiver ID (Leave empty for current user)</label>
                                            <input type="number" class="form-control" id="receiver_id" name="receiver_id" placeholder="User ID">
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="mdi mdi-send me-1"></i> Send Test Notification
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Test Instructions & Debug</h5>
                                </div>
                                <div class="card-body">
                                    <div class="alert alert-info">
                                        <h6>How to test:</h6>
                                        <ol>
                                            <li>Fill in the notification details</li>
                                            <li>Click "Send Test Notification"</li>
                                            <li>Check the bell icon in the navbar for the notification</li>
                                            <li>If browser notifications are enabled, you should see a popup</li>
                                            <li>Check the browser console for any errors</li>
                                        </ol>
                                    </div>
                                    
                                    <div class="alert alert-warning">
                                        <h6>Browser Notification Setup:</h6>
                                        <p>Make sure to allow notifications in your browser:</p>
                                        <ul>
                                            <li>Click the bell icon in the address bar</li>
                                            <li>Select "Allow" for notifications</li>
                                            <li>Refresh the page if needed</li>
                                        </ul>
                                    </div>

                                    <div class="alert alert-success">
                                        <h6>System Information:</h6>
                                        <p><strong>Current User ID:</strong> {{ Auth::id() }}</p>
                                        <p><strong>Channel Name:</strong> user-{{ Auth::id() }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Real-time Test</h5>
                                </div>
                                <div class="card-body">
                                    <p>Open this page in multiple browser tabs or different browsers to test real-time notifications.</p>
                                    <button type="button" class="btn btn-success" onclick="sendQuickTest()">
                                        <i class="mdi mdi-lightning-bolt me-1"></i> Quick Test
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('css-js')
<script>
$(document).ready(function() {
    $('#test-notification-form').on('submit', function(e) {
        e.preventDefault();
        
        const formData = {
            title: $('#title').val(),
            description: $('#description').val(),
            receiver_id: $('#receiver_id').val() || null,
            _token: $('meta[name="csrf-token"]').attr('content')
        };
        
        $.ajax({
            url: '/send-test-notification',
            method: 'POST',
            data: formData,
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                } else {
                    toastr.error('Failed to send notification');
                }
            },
            error: function() {
                toastr.error('Error sending notification');
            }
        });
    });
});

function sendQuickTest() {
    const formData = {
        title: 'Quick Test Notification',
        description: 'This is a quick test notification sent at ' + new Date().toLocaleTimeString(),
        receiver_id: null,
        _token: $('meta[name="csrf-token"]').attr('content')
    };
    
    $.ajax({
        url: '/send-test-notification',
        method: 'POST',
        data: formData,
        success: function(response) {
            if (response.success) {
                toastr.success('Quick test notification sent!');
            } else {
                toastr.error('Failed to send notification');
            }
        },
        error: function() {
            toastr.error('Error sending notification');
        }
    });
}

// Debug functions removed - keeping only essential test functionality
</script>
@endsection