@extends('layout.user')
@section('page-title', __('basic.Notification'))
@section('nav-title', __('basic.Notification'))
@section('page-js-script')
    <script type="text/javascript">
        $(function() {
            $('#btn_read_all').click(function(e) {
                $.ajax({
                    url: '{{ url('ajax/member_notification_read') }}',
                    data: {
                        member_id: '{{ session('user_id') }}',
                        inform_id: 'all',
                    },
                    dataType: 'json',
                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        if (resp.status) {

                            location.reload();
                        } else {
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                // text: resp.msg,
                                html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                        }
                    },
                    error: ajaxError
                });

            });
        });
    </script>
@endsection
@section('container')
    <div class="card d-flex justify-content-between flex-row py-4">
        <h1 class="h6 ps-4 m-0">{{ __('basic.Notification') }}</h1>
        <button class="btn btn-sm btn-primary" id="btn_read_all">{{ __('basic.ReadAll') }}</button>
    </div>
    <div class="card mb-3">
        @empty($notification)
        @endempty
        @foreach ($notification as $item)
            <div class="d-flex align-items-start @if ($item['is_read'] == 0) active-bg @endif flex-row gap-3 py-4 px-6">
                @if (empty($item['thumbnail']))
                    <img class="col-4 col-md-1" src="{{ asset('image/logo/clc_logo.svg') }}" alt="">
                @else
                    <img class="col-4 col-md-1" src="{{ $item['thumbnail'] }}" alt="">
                @endif


                <div class="flex-grow-1">
                    <p class="text-base-m">{{ $item['title'] }}</p>
                    <p class="text-sm-r text-secondary">{!! $item['content'] !!}</p>
                    <p class="text-xs-r">{{ date('Y-m-d', strtotime($item['create_time'])) }}</p>
                </div>
                <div class="tag tag-outline d-none d-xs-block">{{ __('robot.More') }}</div>
            </div>
        @endforeach
    </div>
    @include('partial._pagination', $paginate)
@endsection