@extends('frontend.dashboard.dashboard-app')

@section('dashboard_contents')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <form action="{{ route('dashboard.notifications.index') }}" method="GET" class="d-flex">
                            <select name="read" class="form-select me-2" onchange="this.form.submit()">
                                <option value="">All Notifications</option>
                                <option value="unread" {{ request('read')=='unread' ? 'selected' : '' }}>Unread Only
                                </option>
                                <option value="read" {{ request('read')=='read' ? 'selected' : '' }}>Read Only</option>
                            </select>
                        </form>
                    </div>
                    <div class="col-md-6 text-end">
                        <form action="{{ route('dashboard.notifications.mark-all-read') }}" method="POST"
                            class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-success"
                                onclick="return confirm('Mark all notifications as read?')">
                                <i class="ti ti-check"></i> Mark All as Read
                            </button>
                        </form>
                    </div>
                </div>

                @if($notifications->count() > 0)
                <div class="list-group list-group-flush">
                    @foreach($notifications as $notification)
                    @php
                    $data = $notification->data;
                    $isUnread = is_null($notification->read_at);
                    $ticketId = $data['ticket_id'] ?? '';
                    $url = $ticketId ? route('dashboard.tickets.show', $ticketId) : '#';
                    @endphp
                    <a href="{{ $url }}"
                        class="list-group-item list-group-item-action {{ $isUnread ? 'bg-light-blue' : '' }}">
                        <div class="d-flex w-100 justify-content-between align-items-center">
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center mb-1">
                                    @if($isUnread)
                                    <span class="badge bg-primary me-2">New</span>
                                    @endif
                                    <h6 class="mb-0">{{ $data['ticket_subject'] ?? 'Notification' }}</h6>
                                </div>
                                <p class="mb-1 text-muted">
                                    {{ $data['message'] ?? '' }}
                                </p>
                                <small class="text-muted">
                                    From: {{ $data['sender_name'] ?? 'System' }}
                                    @if(isset($data['sender_type']))
                                    ({{ ucfirst($data['sender_type']) }})
                                    @endif
                                    <br>
                                    {{ $notification->created_at->format('M d, Y h:i A') }}
                                    @if($isUnread)
                                    <a href="{{ route('dashboard.notifications.mark-read', $notification->id) }}"
                                        class="ms-2 text-decoration-none" title="Mark as read">
                                        <i class="ti ti-check"></i> Mark read
                                    </a>
                                    @endif
                                </small>
                            </div>
                        </div>
                    </a>
                    @endforeach
                </div>

                <div class="mt-3">
                    {{ $notifications->links() }}
                </div>
                @else
                <div class="text-center py-5">
                    <div class="mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                            class="text-muted">
                            <path
                                d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
                            <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
                        </svg>
                    </div>
                    <h5 class="text-muted">No notifications yet</h5>
                    <p class="text-muted">When you receive notifications, they will appear here.</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection