{% extends "header.html.twig" %}

{% block body_content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Service Chat Blocked Keywords</h3>
        </div>
        <div class="box-body">
            <table id="datatable" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>From User</th>
                    <th>To User</th>
                    <th>Keyword</th>
                    <th>Message</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog" style="width:330px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p>Are you sure you would like to remove this keyword?</p>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="chat_keyword_id" value=""/>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a class="model-id" href="#">
                        <button type="button" class="btn btn-primary">Delete</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock body_content %}
{% block script_content %}
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script>
      $(document).ready(function () {
        let datatable = $('#datatable').DataTable({
          processing: true,
          serverSide: true,
          orderable: false,
          ajax: {
            url: '/service_chat_keyword/ajax/data',
            type: 'POST',
          },
          columns: [
            { data: 'from_user', name: 'from_user' },
            { data: 'to_user', name: 'to_user' },
            { data: 'keyword', name: 'keyword' },
            { data: 'message', name: 'message' },
            { data: 'action', name: 'action', orderable: false },
          ],
          order: [],
          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']]
        })

        $(document).on('click', '.delete-single', function () {
          var getId = $(this).attr('data-id')
          $('a.model-id').attr('href', 'delete/' + getId)
        })
      })
    </script>
{% endblock script_content %}