@extends('layouts.app')

@section('title', 'Notifikasi')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">
            <i class="fas fa-bell me-2"></i>Notifikasi
        </h1>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Filter Tabs -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <ul class="nav nav-tabs nav-tabs-custom" id="filterTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link {{ $filter === 'all' ? 'active' : '' }}" 
                       href="{{ route('notifications.index', ['filter' => 'all']) }}">
                        <i class="fas fa-list me-2"></i>Semua
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link {{ $filter === 'unread' ? 'active' : '' }}" 
                       href="{{ route('notifications.index', ['filter' => 'unread']) }}">
                        <i class="fas fa-circle me-2"></i>Belum Dibaca
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link {{ $filter === 'read' ? 'active' : '' }}" 
                       href="{{ route('notifications.index', ['filter' => 'read']) }}">
                        <i class="fas fa-check me-2"></i>Sudah Dibaca
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Notifications List -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">
                <i class="fas fa-bell me-2"></i>Daftar Notifikasi
            </h5>
            @if($filter === 'unread' && $notifications->total() > 0)
                <form method="POST" action="{{ route('notifications.read-all') }}" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-check-double me-1"></i>Tandai Semua Sudah Dibaca
                    </button>
                </form>
            @endif
        </div>
        <div class="card-body p-0">
            @if($notifications->count() > 0)
                <div class="list-group list-group-flush">
                    @foreach($notifications as $notification)
                        @php
                            $data = is_string($notification->data) ? json_decode($notification->data, true) : $notification->data;
                            $isRead = !is_null($notification->read_at);
                            $timeAgo = \Carbon\Carbon::parse($notification->created_at)->diffForHumans();
                        @endphp
                        <a href="{{ $data['action_url'] ?? '#' }}" 
                           class="list-group-item list-group-item-action notification-item {{ $isRead ? '' : 'notification-unread' }}"
                           data-notification-id="{{ $notification->id }}"
                           onclick="markAsRead({{ $notification->id }}, event)">
                            <div class="d-flex w-100 justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-center mb-1">
                                        @if(!$isRead)
                                            <span class="badge bg-primary me-2">Baru</span>
                                        @endif
                                        <h6 class="mb-0 {{ $isRead ? 'text-muted' : 'fw-bold' }}">
                                            {{ $notification->title }}
                                        </h6>
                                    </div>
                                    <p class="mb-1 {{ $isRead ? 'text-muted' : '' }}">
                                        {{ $notification->message }}
                                    </p>
                                    <small class="text-muted">
                                        <i class="fas fa-clock me-1"></i>{{ $timeAgo }}
                                    </small>
                                </div>
                                <div class="ms-3">
                                    @if($notification->type === 'pengajuan_submitted')
                                        <i class="fas fa-paper-plane text-primary"></i>
                                    @elseif($notification->type === 'pengajuan_verified')
                                        <i class="fas fa-check-double text-success"></i>
                                    @elseif($notification->type === 'pengajuan_validated')
                                        <i class="fas fa-check-square text-success"></i>
                                    @elseif(str_contains($notification->type, 'rejected'))
                                        <i class="fas fa-times-circle text-danger"></i>
                                    @elseif($notification->type === 'pengajuan_baru_tim_teknis' || $notification->type === 'pengajuan_menunggu_validasi')
                                        <i class="fas fa-bell text-warning"></i>
                                    @else
                                        <i class="fas fa-info-circle text-info"></i>
                                    @endif
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="card-footer bg-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">
                                Menampilkan {{ $notifications->firstItem() }} - {{ $notifications->lastItem() }} 
                                dari {{ $notifications->total() }} notifikasi
                            </small>
                        </div>
                        <nav aria-label="Pagination Navigation">
                            <ul class="pagination pagination-sm mb-0">
                                {{-- Previous Page Link --}}
                                @if ($notifications->onFirstPage())
                                    <li class="page-item disabled">
                                        <span class="page-link">
                                            <i class="fas fa-chevron-left"></i>
                                        </span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $notifications->appends(request()->query())->previousPageUrl() }}" aria-label="Previous">
                                            <i class="fas fa-chevron-left"></i>
                                        </a>
                                    </li>
                                @endif

                                {{-- Pagination Elements --}}
                                @foreach ($notifications->getUrlRange(1, $notifications->lastPage()) as $page => $url)
                                    @if ($page == $notifications->currentPage())
                                        <li class="page-item active">
                                            <span class="page-link">{{ $page }}</span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                        </li>
                                    @endif
                                @endforeach

                                {{-- Next Page Link --}}
                                @if ($notifications->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $notifications->appends(request()->query())->nextPageUrl() }}" aria-label="Next">
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </li>
                                @else
                                    <li class="page-item disabled">
                                        <span class="page-link">
                                            <i class="fas fa-chevron-right"></i>
                                        </span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    </div>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                    <p class="text-muted mb-0">Tidak ada notifikasi</p>
                </div>
            @endif
        </div>
    </div>
</div>

<style>
.notification-item {
    transition: background-color 0.2s ease;
    border-left: 3px solid transparent;
}

.notification-item:hover {
    background-color: #f8f9fa;
}

.notification-unread {
    background-color: #f0f7ff;
    border-left-color: #2563eb;
}

.notification-unread:hover {
    background-color: #e6f2ff;
}
</style>

<script>
function markAsRead(notificationId, event) {
    // Don't prevent default if notification is already read
    const item = event.currentTarget;
    if (item.classList.contains('notification-unread')) {
        fetch(`/notifications/${notificationId}/read`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                item.classList.remove('notification-unread');
                item.querySelector('.badge')?.remove();
                item.querySelector('h6').classList.remove('fw-bold');
                item.querySelector('h6').classList.add('text-muted');
                item.querySelector('p').classList.add('text-muted');
            }
        })
        .catch(error => {
            console.error('Error marking notification as read:', error);
        });
    }
}
</script>
@endsection