@extends('layouts.app')

@section('title', 'Notification List')

@section('content')
<div class="right-content-wrapper">
	<div class="container-fluid p-0">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="main-heading h3 mb-0 text-gray-800">Notifications</h1>
    </div>

    {{-- Alert Messages --}}
    @include('common.alert')

    <div class="row mb-4">
        <div class="col-md-6">
            <form class="d-none1 d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search" action="{{ route('notifications.index') }}" method="get">
                <div class="input-group mb-3">
                    <input type="text" name="search" value="{{$search}}" class="form-control form-control-placeholder" placeholder="Search by title & message key words">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-search fa-sm"></i>
                        </button>
                    </div>
                </div>
            </form>
            <a href="{{ route('notifications.index') }}" class="btn btn-primary">Clear</a>
        </div>

        <div class="col-md-6 text-right">
            <a href="{{ route('notifications.create')}}" class="btn btn-sm btn-primary"><i class="fas fa-plus"></i> Add Notification</a>
        </div>
    </div>

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">All Notifications</h6>

        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table cm-table  table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Message</th>
                            <th>Created Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(count($notifications)>0)
                        @foreach ($notifications as $notification)
                        <tr>
                            <td>{{ $notification->id }}</td>
                            <td>{{ $notification->title }}</td>
                            <td>{!! Str::words(strip_tags($notification->message), 10, ' ...') !!}</td> <!--limit/words-->
                            <td>{{ $notification->created_at }}</td>
                            <td style="display: flex">  
                                <a target="_blank" href="{{ route('notifications.viewlogs', ['id' => $notification->id]) }}" class="btn btn-primary m-2" rel="tooltip" title="view Users">
                                    <i class="fa fa-eye"></i>
                                </a>                         
                                <a class="btn btn-danger m-2 delete-notification-Btn" data-delete-url="{{ route('notifications.destroy', $notification->id) }}" href="javascript:voide(0);" data-toggle="modal" data-target="#deleteModal"  rel="tooltip" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                        @else
                        <tr>
                            <td colspan="5">There are no data.</td>
                        </tr>
                        @endif
                    </tbody>
                </table>

                {{-- $notifications->links() --}}
                {{ $notifications->appends(request()->query())->links() }}
            </div>
        </div>
    </div>

</div>
</div>
@include('notifications.delete-modal')
@endsection

@push('script')
<script>
    $(document).ready(function() {
        $(".delete-notification-Btn").click(function(event) {
            var deleteNotificationUrl = $(this).data('delete-url');
            $("#notification-delete-form").attr('action', deleteNotificationUrl);
        });
    });
</script>
@endpush