@extends('layouts.app')

@section('content')
<div style="max-width: 800px; margin: 2rem auto;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h2 style="font-size: 1.75rem; font-weight: 800; color: var(--text-primary);">Centro de Notificaciones</h2>
        
        @if($notifications->where('is_read', false)->count() > 0)
            <button onclick="markAllAsRead()" class="btn btn-outline btn-sm">
                Marcar todas como leídas
            </button>
        @endif
    </div>

    @if($notifications->isEmpty())
        <div class="glass" style="text-align: center; padding: 4rem 2rem; border-radius: var(--radius-lg);">
            <svg width="60" height="60" fill="none" stroke="var(--text-muted)" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom: 1rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
            <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.5rem;">No tienes notificaciones</h3>
            <p style="color: var(--text-muted);">Te mantendremos al tanto de cualquier novedad con tus citas.</p>
        </div>
    @else
        <div style="display: flex; flex-direction: column; gap: 1rem;">
            @foreach($notifications as $notif)
                <div class="glass notification-card {{ !$notif->is_read ? 'unread' : '' }}" 
                    id="notification-{{ $notif->id }}"
                    style="padding: 1.25rem 1.5rem; border-radius: var(--radius-md); display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; border-left: 4px solid {{ !$notif->is_read ? 'var(--primary-color)' : 'transparent' }}; background: {{ !$notif->is_read ? 'rgba(236, 72, 153, 0.02)' : 'var(--bg-card)' }};">
                    
                    <div style="flex: 1; padding-right: 1.5rem;">
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <h4 style="font-size: 1.05rem; font-weight: 700; color: var(--text-primary);">{{ $notif->title }}</h4>
                            @if(!$notif->is_read)
                                <span style="display: inline-block; width: 8px; height: 8px; background-color: var(--primary-color); border-radius: 50%;"></span>
                            @endif
                        </div>
                        <p style="font-size: 0.95rem; color: var(--text-secondary); margin-top: 0.25rem; line-height: 1.4;">
                            {{ $notif->message }}
                        </p>
                        <span style="font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 0.5rem;">
                            {{ $notif->created_at->diffForHumans() }}
                        </span>
                    </div>

                    @if(!$notif->is_read)
                        <form action="{{ route('notifications.read', $notif->id) }}" method="POST" class="read-form" data-id="{{ $notif->id }}">
                            @csrf
                            <button type="submit" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.35rem 0.65rem;">
                                Marcar leída
                            </button>
                        </form>
                    @endif
                </div>
            @endforeach
        </div>

        <!-- Paginación -->
        <div style="margin-top: 1.5rem;">
            {{ $notifications->links() }}
        </div>
    @endif
</div>

<script>
function markAllAsRead() {
    if (!confirm('¿Marcar todas las notificaciones como leídas?')) return;

    fetch("{{ route('notifications.read', 'all') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            // Update UI
            document.querySelectorAll('.notification-card.unread').forEach(card => {
                card.classList.remove('unread');
                card.style.borderLeftColor = 'transparent';
                card.style.background = 'var(--bg-card)';
                const dot = card.querySelector('span[style*="background-color: var(--primary-color)"]');
                if (dot) dot.remove();
                const form = card.querySelector('.read-form');
                if (form) form.remove();
            });
            // Reload page to clear navbar badges
            window.location.reload();
        }
    })
    .catch(err => console.error(err));
}

// Handle single mark as read via AJAX
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.read-form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const id = this.getAttribute('data-id');
            const card = document.getElementById(`notification-${id}`);

            fetch(this.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    card.classList.remove('unread');
                    card.style.borderLeftColor = 'transparent';
                    card.style.background = 'var(--bg-card)';
                    const dot = card.querySelector('span[style*="background-color: var(--primary-color)"]');
                    if (dot) dot.remove();
                    form.remove();
                    
                    // Update main navigation badges if page is not reloaded
                    const badge = document.querySelector('.nav-badge-container .nav-badge');
                    if (badge) {
                        let currentCount = parseInt(badge.textContent);
                        if (currentCount > 1) {
                            badge.textContent = currentCount - 1;
                        } else {
                            badge.remove();
                        }
                    }
                }
            })
            .catch(err => console.error(err));
        });
    });
});
</script>
@endsection