@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 class="me-5 text-end">
                <a href="{{ route('users.all-notifications', ['type' => 'all', 'id' => 0]) }}"> <span
                        class="badge badge-pill badge-success d-inline-block w-auto">{{ translate('Back') }}</span> </a>
            </div>
        </div>
        <div class="notification_item_list">
            <ul class="list-group list-group-flush">
                <li class="list-group-item d-flex justify-content-between align-items- py-3">
                    <div class="media text-inherit">
                        <div class="media-body">
                            <p class="mb-1 text-truncate-2">
                                {{ $notificationDetail->text }}
                            </p>
                        </div>
                    </div>
                </li>
                <li>
                    @php $images = Json_decode($notificationDetail->images); @endphp
                    <div class="container">
                        <div class="row">
                            {{-- <img src="{{ asset('public/assets/img/notification/' . $image) }}" class="img-thumbnail" width="204px" height="136px"
                                alt=""> --}}
                            <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    @foreach ($images as $index => $image)
                                        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                            <img src="{{ asset('public/assets/img/notification/' . $image) }}"
                                                class="d-block w-100" alt="" style="height:500px;">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
@endsection