@extends("admin.template.layout")

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

              <!-- Ajax Sourced Server-side -->
              <div class="card">
              <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>
                    <a href="{{route('fcm-notification.create')}}" class="main-btn primary-btn btn-hover btn-sm"><i class='bx bx-plus'></i> Create</a>
                </div>
                <div class="card-body">

                <form method="get" id="eventFilterForm">
                    <div class="row mb-3">    
                        <div class="col-md-4">
                            <label for="nationality_filter" class="form-label">Filter by title:</label>
                            <input type="text" name="title" id="title" class="form-input">
                        </div>                                           
                        <div class="col-md-3">
                            <label for="status_filter" class="form-label">Type:</label>
                            <select id="type" name="type" class="form-select">
                              <option value="">All</option>
                              <option value="__ALL_USERS__">All Users</option>
                              <option value="__NEW_USERS__">New Users</option>
                              <option value="__VENUE_USERS__">Venue Users</option>
                              <option value="__COMMUNITY_USERS__">Community Users</option>
                          </select>

                        </div>                        
                                              

                    </div>
                  </form>                
                  <div class="card-datatable text-nowrap">
                    <div class="table-responsive">
                      <table class="datatables-ajax table table-condensed" data-role="ui-datatable" data-src="{{route('fcm-notification.dataTable')}}" >
                          <thead>
                            <tr>
                                <th class="pt-0" data-colname="id">#</th>
                                <th class="pt-0" data-colname="image">Image</th>
                                <th class="pt-0" data-searchable="false" data-colname="title">Title</th>
                                <th class="pt-0" data-colname="type">Type</th>
                                <th class="pt-0" data-searchable="false" data-colname="body">Body</th>
                                <th class="pt-0" data-colname="user_count">Users Count</th>
                                <th class="pt-0" data-colname="created_at">Created on</th>
                            </tr>
                          </thead>
                          <tbody>
                          </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <!--/ Ajax Sourced Server-side -->

            </div>
@stop
@section('header')
<style>
#DataTables_Table_0_filter{display:none !important}  
</style>
@stop
@section('script')
<script>
        jQuery(document).ready(function () {

            App.initTreeView();

        });
        $(function () {
            $('#eventFilterForm').on('submit', function (event) {
                event.preventDefault();
            }).on('input', 'input, select', function (event) {
                var formData = $('#eventFilterForm').serialize();
                var table = $('.datatables-ajax').DataTable();
                table.ajax.url('{{route("fcm-notification.dataTable")}}?' + formData).load();
            });
        });
        
    </script>
@stop