@extends('layouts.master')

@section('head')
    <style>
        #sample_1 tr td:first-child {
            padding-right: 0;
        }

        #sample_1 .Polaris-Choice__Control {
            margin: 0 !important;
        }

        @media only screen and (max-width: 768px) {

            .table-scroll {
                width: 100%;
                overflow-x: auto;
            }

            table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
                top: 28px;
                left: -1px;
            }
        }

        @media only screen and (max-width: 680px) {

            #sample_1 th:first-child, #sample_1 td:first-child {
                padding-left: 4px;
            }
        }

        @media only screen and (max-width: 580px) {
            /*.channel_icon{margin-left: 15px;}*/
        }

        @media only screen and (max-width: 380px) {
            #sample_1 th, #sample_1 td {
                /*padding-left: 0px !important;*/
            }
        }


    </style>
    <link href="{{ URL::asset('css/datatable.css?v=1') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/faq.css') }}" rel="stylesheet" type="text/css"/>


@endsection

@section('content')
    <section class="section">
        <div class="container">
            <div class="section-main-heading">
                <h4>Notifications</h4>

                <ul class="faq-list notification">
                    @foreach($notifications as $notification)
                        <li class="mark-as-read-notification">

                            <div class="question" data-target-action="{{ route('notification.marked_as_read',$notification->id) }}">
                                <i class="un-read {{ $notification->marked_as_read ? 'fal' : 'fas' }} fa-circle text-success"></i>
                                <div>{{ $notification->notification_title }}</div>
                                <small class="text-muted">{{ $notification->updated_at }}</small>
                            </div>

                            <div class="answer">
                                <p>{!! $notification->notification_body !!}</p>
                            </div>
                        </li>
                    @endforeach
                </ul>
                <div class="d-flex justify-content-center pt-5 pb-5">
                    {{ $notifications->links() }}
                </div>
            </div>
        </div>

    </section>
@endsection

@section('last_scripts')
    <script type="text/template" id="checkbox-template">
        <label class="Polaris-Choice" for="PolarisCheckbox_@id" style="display:inline-block">
            <span class="Polaris-Choice__Control">
                <span class="Polaris-Checkbox">
                    <input id="PolarisCheckbox_@id" value="@id" type="checkbox" class="Polaris-Checkbox__Input"
                           aria-invalid="false" role="checkbox" aria-checked="false"><span
                            class="Polaris-Checkbox__Backdrop"></span>
                    <span class="Polaris-Checkbox__Icon">
                        <span class="Polaris-Icon">
                            <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                <path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                            </svg>
                        </span></span></span></span>
        </label></script>
    <script type="text/javascript">
        function clearLogFilters() {
            $('#webhook_status').val('');
            $('#trigger_at').val('');
            $("#connector_channel_id").empty().trigger('change');
            table.search("").draw();
        }

        $(document).on('click', '.retry-failed-job-button', function () {
                let action_obj = $(this);
                action_obj.attr('disabled', true);
                var url = action_obj.data('retry-action');
                show_loading_img();
                $("#test-action-response").html('');
                $.ajax({
                    url: url,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': "