@extends('frontend.layouts.user_panel')

@section('panel_content')
    <div class="card">
        <div class="card-header row gutters-5">
            <div class="col">
                <h5 class="mb-0 h6">{{ translate('Notifications') }}</h5>
            </div>
        </div>
    </div>
    <div class="notification_list">
        @forelse($notifications as $notification)       
            <div class="nitification_box {{ $notification->is_read == 1 ? 'read' : 'unread'}} ">
                <a href="{{ route('notifications.detail', ['id' => $notification->id]) }}" class="nitification_box_inr">
                    <div class="notification_img">
                        <img src="{{ asset('public/assets/img/notification/' . $notification->thumbnail_image) }}" class="image rounded-circle" width="5%" alt="">
                    </div>
                    <div class="notification_info">
                        <h4 style="color: black">{{ $notification->title }}</h4>
                        <p class="notification-text" style="display:none; color: black">{{ $notification->text }}</p>
                        <p class="notification-text-x" style="color: black" >{{ \Illuminate\Support\Str::words($notification->text, 20, '...') }}</p>
                    </div>
                </a>
                @if (strlen($notification->text) > 20)
                <div class="readmore_btn text-right">
                    <a href="#" class="read-more mx-2" style="color: black">Read More</a>
                    <a href="#" class="less-more mx-2" style="display: none; color: black">Less</a>
                </div>
                @else
                @endif
            </div>
        @empty
            <div class="list-group-item">
                <div class="py-4 text-center fs-16">{{ translate('No notification found') }}</div>
            </div>

        @endforelse
    </div>

    <div style="margin: 0 auto;">
        {!! $notifications->links() !!}
    </div>

        {{-- <div class="row">
            <div class="col-md-12 mt-2">
                @forelse($notifications as $notification)
                    <div class="notification-link {{ $notification->is_read == 1 ? 'read' : 'unread' }} ">
                        <a href="{{ route('notifications.detail', ['id' => $notification->id]) }}">
                            <div class="mx-2">
                                <img src="{{ asset('public/assets/img/notification/' . $notification->thumbnail_image) }}"
                                    class="image rounded-circle" width="5%" alt=""><br>
                                <strong style="color: black">{{ $notification->title }}</strong><br>
                                <p class="notification-text" style="display: none; color: black">
                                    {{ $notification->text }}
                                </p>
                                <p class="notification-text-x" style="color: black">
                                    {{ \Illuminate\Support\Str::words($notification->text, 20, '...') }}
                                </p>
                            </div>
                        </a>
                        @if (strlen($notification->text) > 20)
                            <a href="#" class="read-more mx-2" style="color: black">Read More</a>
                            <a href="#" class="less-more mx-2" style="display: none; color: black">Less</a><br><br>
                        @else
                            <br><br>
                        @endif
                    </div>

                    <div style="height: 10px; background-color: white;"></div>

                @empty
                    <div class="list-group-item">
                        <div class="py-4 text-center fs-16">{{ translate('No notification found') }}</div>
                    </div>
                @endforelse
            </div>
        </div>
         --}}

@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('.read-more').click(function() {
                $(this).hide();
                $(this).siblings('.less-more').show();
                $(this).closest('.nitification_box').find('.notification-text').show();
                $(this).closest('.nitification_box').find('.notification-text-x').hide();
            });

            $('.less-more').click(function() {
                $(this).hide();
                $(this).siblings('.read-more').show();
                $(this).closest('.nitification_box').find('.notification-text-x').show();
                $(this).closest('.nitification_box').find('.notification-text').hide();
            });
        });
    </script>
@endsection