@include('layout.header')

<section id="content">
    <section class="bgGrey py-4">
        <div class="container">
            <div class="table-title p-0 pt-2 pb-2 text-bold">My Notification</div>
            
            <table class="table table-striped table-custom mydatatable">
                <thead>
                    <tr>
                        <th><button type="button" id="selectAll" class="btn btn-info" style="font-size: 10px">
                            <span class="sub"></span> Read All </button></th>
                        <th style="width: 2%;"></th>
                        <th style="width: 15%;">Tanggal</th>
                        <th>Title</th>
                        <th style="width: 10%;">Link</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($notification as $item)
                    <tr>
                        <td align="center"><input type="checkbox" name="notif" value="{{ $item->id }}" class="checkbox"/></td>
                        <td>
                            @if ($item->is_read == 0)
                            <i class="fa fa-circle" style="color: #FF002E;"></i>
                            @endif
                        </td>
                        <td>{{date_format($item->created_at, 'd M Y H:i')}}</td>
                        <td>{{$item->title}}</td>
                        <td>
                            <a href="#" onclick="readNotification({{$item->id}})" style="color: #001561;">
                                <i class="fa fa-share-square" style="color: #001561;"></i> Lihat
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>
</section>

@include('layout.footer')

<script>

    $('#selectAll').click(function(e) {
        if($(this).hasClass('checkedAll')) {
          $('input').prop('checked', false);   
          $(this).removeClass('checkedAll');
        } else {
          $('input').prop('checked', true);
          $(this).addClass('checkedAll');

          readNotificationAll();
        }
    });

    $(".checkbox").change(function() {
        if(this.checked) {
            var _value = $(this).val();
            readNotificationSingle(_value);
        }
    });


    function readNotificationAll(){
        $.ajax({
            type: "GET",
            url: '/notification/readAll/',
            success: function(result){
                location.reload();
            },
        });
    }

    function readNotificationSingle(id){
        $.ajax({
            type: "GET",
            url: '/notification/read/'+id,
            success: function(result){
                location.reload();
            },
        });
    }

    function readNotification(id){
        $.ajax({
            type: "GET",
            url: '/notification/read/'+id,
            success: function(result){
                window.location.href = result.data.url;
            },
        });
    }
    </script>