@extends('core::layouts.dashboard')

@section('title', 'Notifikasi')

@section('content')
<div class="notifications-page">
    {{-- Page Header --}}
    <div class="page-header">
        <div class="header-left">
            <h1 class="page-title">
                <i class="fas fa-bell"></i>
                Notifikasi
            </h1>
            <p class="page-subtitle">Semua notifikasi Anda</p>
        </div>
        <div class="header-right">
            @if($notifications->total() > 0)
                <button type="button" class="btn-primary" onclick="markAllAsRead()">
                    <i class="fas fa-check-double"></i>
                    Tandai Semua Dibaca
                </button>
            @endif
        </div>
    </div>

    {{-- Notifications Content --}}
    <div class="notifications-content">
        @if($notifications->isEmpty())
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="fas fa-bell-slash"></i>
                </div>
                <h3>Tidak Ada Notifikasi</h3>
                <p>Anda belum memiliki notifikasi</p>
            </div>
        @else
            <div class="notifications-list">
                @foreach($notifications as $notification)
                    <div class="notification-card {{ $notification->read_at ? '' : 'unread' }}" data-id="{{ $notification->id }}">
                        <div class="notification-icon">
                            @php
                                $icon = 'fa-bell';
                                $iconClass = 'default';

                                if(isset($notification->data['type'])) {
                                    switch($notification->data['type']) {
                                        case 'reward':
                                            $icon = 'fa-gift';
                                            $iconClass = 'success';
                                            break;
                                        case 'event':
                                            $icon = 'fa-calendar-check';
                                            $iconClass = 'info';
                                            break;
                                        case 'game':
                                            $icon = 'fa-gamepad';
                                            $iconClass = 'primary';
                                            break;
                                        case 'academy':
                                            $icon = 'fa-video';
                                            $iconClass = 'warning';
                                            break;
                                        case 'security':
                                            $icon = 'fa-shield-alt';
                                            $iconClass = 'danger';
                                            break;
                                        case 'coin':
                                            $icon = 'fa-coins';
                                            $iconClass = 'warning';
                                            break;
                                        case 'point':
                                            $icon = 'fa-star';
                                            $iconClass = 'info';
                                            break;
                                    }
                                }
                            @endphp
                            <i class="fas {{ $icon }} icon-{{ $iconClass }}"></i>
                        </div>
                        <div class="notification-content">
                            <h4 class="notification-title">{{ $notification->data['title'] ?? 'Notifikasi' }}</h4>
                            <p class="notification-message">{{ $notification->data['message'] ?? 'Anda memiliki notifikasi baru' }}</p>
                            <div class="notification-footer">
                                <span class="notification-time">
                                    <i class="far fa-clock"></i>
                                    {{ $notification->created_at->diffForHumans() }}
                                </span>
                                @if(!$notification->read_at)
                                    <span class="unread-badge">Baru</span>
                                @endif
                            </div>
                        </div>
                        <div class="notification-actions">
                            @if(!$notification->read_at)
                                <button type="button" class="btn-icon" onclick="markAsRead('{{ $notification->id }}')" title="Tandai dibaca">
                                    <i class="fas fa-check"></i>
                                </button>
                            @endif
                            <button type="button" class="btn-icon btn-danger" onclick="deleteNotification('{{ $notification->id }}')" title="Hapus">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>

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

<style>
.notifications-page {
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title i {
    color: #8b5cf6;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 0 0;
    font-size: 14px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5568d3 0%, #653a8a 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.notifications-content {
    background: rgba(30, 20, 60, 0.4);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 30px;
    backdrop-filter: blur(10px);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    font-size: 64px;
    color: rgba(139, 92, 246, 0.3);
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
}

.empty-state p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: rgba(30, 20, 60, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    border-left: 4px solid transparent;
    transition: all 0.3s;
}

.notification-card.unread {
    background: rgba(102, 126, 234, 0.15);
    border-left-color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.4);
}

.notification-card:hover {
    transform: translateX(5px);
    background: rgba(30, 20, 60, 0.8);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
}

.notification-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.notification-icon i.icon-default {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    padding: 12px;
    border-radius: 12px;
}

.notification-icon i.icon-success {
    color: #28a745;
    background: rgba(40, 167, 69, 0.1);
    padding: 12px;
    border-radius: 12px;
}

.notification-icon i.icon-info {
    color: #17a2b8;
    background: rgba(23, 162, 184, 0.1);
    padding: 12px;
    border-radius: 12px;
}

.notification-icon i.icon-warning {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
    padding: 12px;
    border-radius: 12px;
}

.notification-icon i.icon-danger {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    padding: 12px;
    border-radius: 12px;
}

.notification-icon i.icon-primary {
    color: #007bff;
    background: rgba(0, 123, 255, 0.1);
    padding: 12px;
    border-radius: 12px;
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 8px;
}

.notification-message {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0 0 12px;
    line-height: 1.5;
}

.notification-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.notification-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 5px;
}

.unread-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.notification-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.btn-icon {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: rgba(255, 255, 255, 0.7);
}

.btn-icon:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.6);
    color: #8b5cf6;
    transform: scale(1.1);
}

.btn-icon.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.6);
    color: #ef4444;
}

.pagination-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .notifications-page {
        padding: 15px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .notification-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .notification-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
</style>

<script>
function markAsRead(notificationId) {
    fetch(`/dashboard/notifications/${notificationId}/mark-as-read`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            const card = document.querySelector(`[data-id="${notificationId}"]`);
            if(card) {
                card.classList.remove('unread');
                const badge = card.querySelector('.unread-badge');
                if(badge) badge.remove();
                const btn = card.querySelector('.btn-icon:not(.btn-danger)');
                if(btn) btn.remove();
            }
            updateNotificationCount();
        }
    });
}

function markAllAsRead() {
    if(confirm('Tandai semua notifikasi sebagai sudah dibaca?')) {
        fetch('/dashboard/notifications/mark-all-as-read', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                location.reload();
            }
        });
    }
}

function deleteNotification(notificationId) {
    if(confirm('Hapus notifikasi ini?')) {
        fetch(`/dashboard/notifications/${notificationId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => {
            if(response.ok) {
                location.reload();
            }
        });
    }
}

function updateNotificationCount() {
    fetch('/dashboard/notifications/unread-count')
        .then(response => response.json())
        .then(data => {
            const badge = document.querySelector('.notification-badge');
            if(badge) {
                badge.textContent = data.count;
                if(data.count === 0) {
                    badge.style.display = 'none';
                }
            }
        });
}
</script>
@endsection