@extends('layouts.admin')

@section('content')
<div class="container mt-4">
    <h1>Send Push Notification</h1>

    <!-- Display Success and Error Messages -->
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    @if(session('warning'))
        <div class="alert alert-warning">{{ session('warning') }}</div>
    @endif

    <form id="notificationForm" action="{{ route('admin.notifications.send') }}" method="POST">
        @csrf

        <!-- Notification Title -->
        <div class="form-group">
            <label for="title">Notification Title</label>
            <input type="text" name="title" id="title" class="form-control" value="{{ old('title') }}" required>
        </div>

        <!-- Notification Body -->
        <div class="form-group">
            <label for="body">Notification Body</label>
            <textarea name="body" id="body" class="form-control" rows="3" required>{{ old('body') }}</textarea>
        </div>

        <!-- Select Users -->
        <div class="form-group">
            <label>Select Users</label>
            <table id="usersTable" class="table table-striped display nowrap" style="width:100%">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                        <tr>
                            <td><input type="checkbox" class="user-checkbox" name="users[]" value="{{ $user->id }}"></td>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <button type="submit" class="btn btn-primary">Send Notification</button>
    </form>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        var table = $('#usersTable').DataTable({
            paging: true,
            searching: true,
            responsive: true
        });

        // Ensure table row click selects the checkbox
        $('#usersTable tbody').on('click', 'tr', function(event) {
            if (event.target.type !== 'checkbox') {
                var checkbox = $(this).find('.user-checkbox');
                checkbox.prop('checked', !checkbox.prop('checked'));
            }
        });

        // Handle "Select All" checkbox
        $('#selectAll').on('click', function() {
            var checked = this.checked;
            $('.user-checkbox').each(function() {
                $(this).prop('checked', checked);
            });
        });

        // Prevent form submission if no user is selected
        $('#notificationForm').on('submit', function(e) {
            var selectedUsers = $('.user-checkbox:checked').length;
            if (selectedUsers === 0) {
                alert('Please select at least one user before sending the notification.');
                e.preventDefault();
            }
        });
    });
</script>
@endsection