
<div class="container-fluid">
  <div class="container-fluid">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title fw-semibold mb-4">Push notification</h5>
        <div class="card">
          <div class="card-body">
            <form class="form form-vertical" method="POST" enctype="multipart/form-data" id="">
                <div class="form-body">
                    <div class="row">
                        
                        <div class="col-12">
                            <div class="form-group">
                                <label for="title">Title:</label>
                                <input type="text" id="title" class="form-control" name="title" placeholder="Type Title here ...">
                            </div>
                        </div>
        
                        <div class="col-12">
                            <div class="form-group">
                                <label for="message">Message:</label>
                                <textarea id="message" class="form-control" name="message" placeholder="Type message here ..."  rows="10" cols="50"></textarea>
                            </div>
                        </div>

                        
                        <div class="col-12 d-flex justify-content-start mt-3">
                            <button type="button" class="btn btn-primary me-1 mb-1" onclick="send_notification()">Submit</button>
                        </div>

                    </div>
                </div>
            </form>
          </div>
        </div>

 
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>




<script>
    function send_notification() {
        event.preventDefault(); // Prevent form submission

        // loader.removeAttribute('id');

        // Get the form data
        let title = $('#title').val();
        let message = $('#message').val();

        // Validate form inputs (optional)
        if (!title || !message) {
            setTimeout(function() {
                loader.setAttribute('id', 'hide');
            }, 1000);
            error("Both title and message are required!");
            return;
        }

      

        // Prepare the payload
        let payload = {
            title: title,
            message: message,
        };


        // Call the API using AJAX
        $.ajax({
            url: '<?= site_url(); ?>/admin/notification/send_notification', // Replace with your actual API URL
            type: 'POST',
            data: payload,
            dataType: 'json',
            success: function (response) {
                if(response.status == '1'){
                   
                    // Display success message or redirect
                    success("Notification sent successfully!");
    
                    setTimeout(function() {
                        // loader.setAttribute('id', 'hide');
                        location.reload();
                    }, 1000);

                }else{
                    error('Failed to send notification');

                    setTimeout(function() {
                        // loader.setAttribute('id', 'hide');
                    }, 1000);
                }
            },
            error: function (xhr, status, error) {
                console.error("Error sending notification:", error);

                // Display error message
                error("Failed to send notification. Please try again.");

                // Hide loader
                // $('#loader').attr('id', 'hide');
            }
        });
    }
</script>
