@extends('layouts.super-admin')

@section('title', 'Notifikasi')
@section('page-title', 'Notifikasi Sistem')
@section('page-description', 'Daftar notifikasi peringatan dan informasi sistem')

@section('content')
<div class="notifications-container">
    <div class="notifications-header">
        <div class="header-left">
            <h2>Notifikasi</h2>
            @if($unreadCount > 0)
                <span class="badge-unread">{{ $unreadCount }} belum dibaca</span>
            @endif
        </div>
        <form method="POST" action="{{ route('notifications.mark-all-read') }}">
            @csrf
            <button type="submit" class="btn-mark-all">Tandai Semua Dibaca</button>
        </form>
    </div>

    <div class="notifications-list">
        @forelse($notifications as $notification)
        <div class="notification-item {{ !$notification->is_read ? 'unread' : '' }}" data-id="{{ $notification->id }}">
            <div class="notification-icon {{ $notification->type }}">
                @switch($notification->type)
                    @case('battery_low')
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
                            <line x1="12" y1="18" x2="12" y2="18"/>
                            <path d="M12 8v4"/>
                        </svg>
                        @break
                    @case('device_offline')
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
                        </svg>
                        @break
                    @case('high_temperature')
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4"/>
                            <circle cx="12" cy="12" r="4"/>
                        </svg>
                        @break
                    @case('earthquake_alert')
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                        </svg>
                        @break
                    @default
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="12" y1="8" x2="12" y2="12"/>
                            <circle cx="12" cy="16" r="0.5"/>
                        </svg>
                @endswitch
            </div>
            <div class="notification-content">
                <div class="notification-title">{{ $notification->title }}</div>
                <div class="notification-message">{{ $notification->message }}</div>
                <div class="notification-meta">
                    <span class="notification-time">{{ $notification->created_at->diffForHumans() }}</span>
                    @if($notification->data && isset($notification->data['location']))
                        <span class="notification-location">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                            {{ $notification->data['location'] }}
                        </span>
                    @endif
                </div>
            </div>
            @if(!$notification->is_read)
            <div class="notification-action">
                <form method="POST" action="{{ route('notifications.mark-read', $notification->id) }}">
                    @csrf
                    <button type="submit" class="btn-mark-read">Tandai Dibaca</button>
                </form>
            </div>
            @endif
        </div>
        @empty
        <div class="empty-state">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9ca3af">
                <circle cx="12" cy="12" r="10"/>
                <line x1="12" y1="8" x2="12" y2="12"/>
                <circle cx="12" cy="16" r="0.5"/>
            </svg>
            <p>Belum ada notifikasi</p>
        </div>
        @endforelse
    </div>

    <div class="pagination">
        {{ $notifications->links() }}
    </div>
</div>

<style>
.notifications-container {
    max-width: 800px;
    margin: 0 auto;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.badge-unread {
    background: #dc2626;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
}

.btn-mark-all {
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
}

.notification-item.unread {
    background: #fef2f2;
    border-color: #fecaca;
}

.notification-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon.battery_low { background: #fef3c7; color: #d97706; }
.notification-icon.device_offline { background: #fee2e2; color: #dc2626; }
.notification-icon.high_temperature { background: #fee2e2; color: #dc2626; }
.notification-icon.earthquake_alert { background: #dc2626; color: white; }

.notification-content {
    flex: 1;
}

.notification-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.notification-message {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.notification-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.7rem;
    color: #9ca3af;
}

.notification-location {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-mark-read {
    padding: 0.25rem 0.75rem;
    background: none;
    border: 1px solid #dc2626;
    color: #dc2626;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.7rem;
}

.btn-mark-read:hover {
    background: #dc2626;
    color: white;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: #9ca3af;
}

.empty-state svg {
    margin-bottom: 1rem;
}

.pagination {
    margin-top: 1.5rem;
    text-align: center;
}
</style>
@endsection