<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notifications - {{ hotelName() }}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --green-900: #114b5f;
            --green-700: #1a936f;
            --green-500: #2ec4a6;
            --green-100: #eaf8f4;
            --text-900: #1f2937;
            --text-600: #6b7280;
            --line: #e5e7eb;
            --danger: #dc3545;
            --white: #ffffff;
            --radius: 16px;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            color: var(--text-900);
            background:
                radial-gradient(1200px 400px at 15% -10%, rgba(46, 196, 166, 0.22), transparent 50%),
                radial-gradient(900px 300px at 90% -20%, rgba(17, 75, 95, 0.18), transparent 50%),
                #f7faf9;
            min-height: 100vh;
        }

        .container { width: min(1100px, 94vw); margin: 28px auto 36px; }

        .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: var(--green-900);
            font-weight: 600;
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 8px 14px;
        }

        .header {
            border-radius: var(--radius);
            background: linear-gradient(135deg, var(--green-900), var(--green-700));
            color: var(--white);
            box-shadow: 0 16px 34px rgba(17, 75, 95, 0.28);
            padding: 20px 22px;
            margin-bottom: 16px;
        }

        .header-main {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .title { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: 0.2px; }
        .subtitle { margin-top: 4px; opacity: 0.9; font-size: 0.92rem; }
        .actions { display: flex; flex-wrap: wrap; gap: 8px; }

        .btn, button.btn {
            border: 1px solid transparent;
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 0.83rem;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: 0.18s ease;
        }

        .btn-light { background: rgba(255, 255, 255, 0.94); color: var(--green-900); }
        .btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.6); }
        .btn-outline-light:hover, .btn-light:hover { transform: translateY(-1px); filter: brightness(1.02); }

        .card {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            overflow: hidden;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
        }

        .list { display: flex; flex-direction: column; }

        .item {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            padding: 14px 16px;
            border-bottom: 1px solid #f0f2f3;
            border-left: 4px solid transparent;
        }
        .item:last-child { border-bottom: none; }
        .item.unread { border-left-color: var(--green-700); background: var(--green-100); }
        .item:hover { background: #fafcfb; }

        .left { display: flex; gap: 12px; flex: 1; min-width: 0; }
        .icon { color: var(--green-700); margin-top: 2px; width: 20px; text-align: center; flex: 0 0 20px; }
        .msg-title { font-size: 0.96rem; font-weight: 800; margin-bottom: 3px; }
        .msg-body { font-size: 0.9rem; color: var(--text-600); line-height: 1.45; margin-bottom: 3px; word-break: break-word; }
        .meta { font-size: 0.76rem; color: #9ca3af; }
        .right { display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; }

        .btn-green { background: var(--green-700); color: var(--white); }
        .btn-green:hover { background: #177e60; }
        .btn-outline-green { background: transparent; color: #177e60; border-color: #177e60; }
        .btn-outline-red { background: transparent; color: var(--danger); border-color: var(--danger); }

        .empty { text-align: center; color: var(--text-600); padding: 60px 16px; }
        .empty i { font-size: 1.9rem; margin-bottom: 8px; color: #a0a9af; }

        .pager { margin-top: 14px; }

        @media (max-width: 760px) {
            .item { flex-direction: column; }
            .right { width: 100%; }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="topbar">
        <a href="{{ route('dashboard') }}" class="back-link">
            <i class="fas fa-arrow-left"></i>
            <span>Back to Dashboard</span>
        </a>
    </div>

    <div class="header">
        <div class="header-main">
            <div>
                <h1 class="title"><i class="fas fa-bell"></i> Notifications</h1>
                <div class="subtitle">Unread: {{ $unreadCount }}</div>
            </div>
            <div class="actions">
                <a href="{{ route('notifications.notifications.index', ['filter' => 'all']) }}" class="btn {{ $filter === 'all' ? 'btn-light' : 'btn-outline-light' }}">All</a>
                <a href="{{ route('notifications.notifications.index', ['filter' => 'unread']) }}" class="btn {{ $filter === 'unread' ? 'btn-light' : 'btn-outline-light' }}">Unread</a>
                <form method="POST" action="{{ route('notifications.notifications.mark-all-read') }}">
                    @csrf
                    <button type="submit" class="btn btn-outline-light"><i class="fas fa-check"></i> Mark all read</button>
                </form>
                <form method="POST" action="{{ route('notifications.notifications.clear-all') }}" onsubmit="return confirm('Clear all notifications?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-outline-light"><i class="fas fa-trash"></i> Clear all</button>
                </form>
            </div>
        </div>
    </div>

    <div class="card">
        @if($notifications->isEmpty())
            <div class="empty">
                <i class="far fa-bell-slash"></i>
                <div>No notifications found.</div>
            </div>
        @else
            <div class="list">
                @foreach($notifications as $notification)
                    @php
                        $data = $notification->data ?? [];
                        $url = $data['url'] ?? null;
                        $type = $data['type'] ?? 'info';
                        $icon = match (true) {
                            str_contains($type, 'reservation') => 'fa-calendar-check',
                            str_contains($type, 'maintenance') => 'fa-screwdriver-wrench',
                            str_contains($type, 'service') => 'fa-concierge-bell',
                            str_contains($type, 'purchase') => 'fa-truck-ramp-box',
                            str_contains($type, 'leave') => 'fa-user-clock',
                            str_contains($type, 'order') => 'fa-receipt',
                            default => 'fa-circle-info',
                        };
                    @endphp
                    <div class="item {{ is_null($notification->read_at) ? 'unread' : '' }}">
                        <div class="left">
                            <div class="icon"><i class="fas {{ $icon }}"></i></div>
                            <div>
                                <div class="msg-title">{{ $data['title'] ?? 'Notification' }}</div>
                                <div class="msg-body">{{ $data['message'] ?? 'System update' }}</div>
                                <div class="meta">{{ $notification->created_at?->diffForHumans() }}</div>
                            </div>
                        </div>
                        <div class="right">
                            @if($url)
                                <a href="{{ url($url) }}" class="btn btn-green">Open</a>
                            @endif
                            @if(is_null($notification->read_at))
                                <form method="POST" action="{{ route('notifications.notifications.mark-read', $notification->id) }}">
                                    @csrf
                                    <button type="submit" class="btn btn-outline-green">Read</button>
                                </form>
                            @endif
                            <form method="POST" action="{{ route('notifications.notifications.destroy', $notification->id) }}" onsubmit="return confirm('Delete this notification?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline-red"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <div class="pager">
        {{ $notifications->links() }}
    </div>
</div>
</body>
</html>

