@extends('front.layouts.master')
@section('title', 'Notifications')
@section('content')
    <div class="dashboard-area pt-30 mb-120">
        <div class="container">
            <div class="row g-lg-4 gy-5 mb-90">
                @include('front.pages.candidate.candidate-sidebar')
                <div class="col-lg-9">
                    <div class="applied-job-area">
                        <div class="table-wrapper">
                            <div class="table-title-filter">
                                <div class="section-title">
                                    <h5>{{ translate('Notifications') }}: </h5>
                                </div>
                            </div>
                            @if (count($notifications) > 0)
                                <table class="eg-table table category-table mb-30">
                                    <thead>
                                        <tr>
                                            <th>{{ translate('Title') }}</th>
                                            <th>{{ translate('Message') }}</th>
                                            <th>{{ translate('Date') }}</th>
                                            <th>{{ translate('Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($notifications as $notification)
                                            <tr>
                                                <td> {{ $notification->data['title'] }}</td>
                                                <td> <button type="button"
                                                        class="primary-btn-2 {{ !$notification->read_at ? 'show-notification' : '' }}"
                                                        data-action="{{ route('candidate.read.notification', $notification->id) }}"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#showMessage{{ $notification->id }}"> {{ translate('Show Message') }}
                                                    </button>
                                                    <div class="modal fade" id="showMessage{{ $notification->id }}"
                                                        tabindex="-1" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered modal-sm">
                                                            <div class="modal-content rounded-4 shadow-lg border-0 overflow-hidden">
                                                                <div class="modal-header"
                                                                    style="background: linear-gradient(90deg, #059669, #10b981); color: #fff; border-bottom: none;">
                                                                    <h5 class="modal-title">
                                                                        {{ $notification->data['title'] }}</h5>
                                                                    <button type="button" class="btn-close btn-close-white"
                                                                        data-bs-dismiss="modal"></button>
                                                                </div>
                                                                <div class="modal-body p-4"
                                                                    style="background-color: #f9fafb;">
                                                                    <div class="notification-message p-3 rounded-3 shadow-sm"
                                                                        style="border-left: 4px solid #059669; background-color: #fff;">
                                                                        {!! clean($notification->data['message']) !!}
                                                                    </div>
                                                                    <div class="text-end mt-3">
                                                                        <small
                                                                            class="text-muted fst-italic">{{ $notification->created_at->diffForHumans() }}</small>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td data-label="{{ translate('Date') }}">
                                                    {{ $notification->created_at->diffForHumans() }}
                                                </td>
                                                <td data-label="{{ translate('Action') }}">
                                                    <a href="{{ route('candidate.delete.notification', $notification->id) }}"
                                                        class="text-danger"> <i class="bi bi-trash-fill"> </i> </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="pagination-table-info">
                                    <div class="table-info">
                                        <span>{{ $notifications->lastItem() }} {{ translate('Results Showing In') }}
                                            {{ $notifications->total() }} {{ translate('Notifications') }}</span>
                                    </div>
                                    <div class="pagination-area">
                                        {{ $notifications->links('front.vendor.pagination.custom') }}
                                    </div>
                                </div>
                            @else
                                <div class="no-notification-area">
                                    {{ no_results_found(
                                        'You have no notifications yet.',
                                        'Notifications will appear here when you receive them.',
                                        'frontend/assets/images/bg/no-search-icon.svg',
                                    ) }}
                                </div>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection