@extends('seller.layouts.app')

@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="#" 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>{{ $notification->title }}</h4>
                        <p class="notification-text" style="display:none;">{{ $notification->text }}</p>
                        <p class="notification-text-x" >{{ \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>
    <div style="margin: 0 auto;">
        {!! $notifications->links() !!}
    </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