@extends('layouts.app')
@section('title', 'Notifications')
@section('page-title', 'Notifications')

@section('content')
<div class="page-header">
    <div>
        <div class="breadcrumb"><a href="{{ route('hotel.dashboard') }}">Dashboard</a><span>/</span>Notifications</div>
        <h1>Notifications</h1>
    </div>
    <div>
        <form method="POST" action="{{ route('hotel.notifications.mark-all-read') }}" style="display:inline;">
            @csrf
            <button type="submit" class="btn btn-outline"><i class="fas fa-check-double"></i> Mark All Read</button>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        @if($notifications->count())
            @foreach($notifications as $notif)
            <div style="padding:12px 0;border-bottom:1px solid #f3f4f6;{{ !$notif->is_read ? 'background:#f8fafc;margin:-1px -20px;padding:12px 20px;' : '' }}">
                <div style="display:flex;justify-content:space-between;align-items:center;">
                    <div>
                        <div style="font-weight:{{ !$notif->is_read ? '600' : '400' }}">{{ $notif->title }}</div>
                        <div style="font-size:13px;color:#6b7280;">{{ $notif->message }}</div>
                        <div style="font-size:11px;color:#9ca3af;margin-top:4px;">{{ $notif->created_at->diffForHumans() }}</div>
                    </div>
                    @if(!$notif->is_read)
                    <a href="{{ route('hotel.notifications.mark-read', $notif) }}" class="btn btn-sm btn-outline">Mark Read</a>
                    @endif
                </div>
            </div>
            @endforeach
            {{ $notifications->links() }}
        @else
            <div style="text-align:center;padding:40px;color:#9ca3af;">
                <i class="fas fa-bell-slash" style="font-size:48px;margin-bottom:16px;"></i>
                <p>No notifications yet.</p>
            </div>
        @endif
    </div>
</div>
@endsection