@extends('layouts.app')

@section('subtitle', 'Pusat Notifikasi')

@section('content_body')
    <x-page-header 
        title="Pusat Notifikasi" 
        subtitle="Melihat dan mengelola seluruh pemberitahuan aktivitas sistem desa."
        :breadcrumbs="['Dashboard' => route('dashboard'), 'Notifikasi' => '#']"
    />

    <div class="container-fluid px-0">
        <!-- BARIS FILTER DAN AKSI GLOBAL -->
        <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap" style="gap: 12px;">
            <!-- Filter Kategori Notifikasi -->
            <div class="btn-group shadow-sm" role="group" style="border-radius: 8px; overflow: hidden;">
                <a href="{{ route('notifications.index', ['filter' => 'all']) }}" class="btn {{ $filter === 'all' ? 'btn-primary' : 'btn-white bg-white text-secondary' }} px-4 font-weight-bold" style="font-size: 0.85rem; border: 1px solid #e2e8f0;">Semua</a>
                <a href="{{ route('notifications.index', ['filter' => 'unread']) }}" class="btn {{ $filter === 'unread' ? 'btn-primary' : 'btn-white bg-white text-secondary' }} px-4 font-weight-bold" style="font-size: 0.85rem; border: 1px solid #e2e8f0; border-left: none; border-right: none;">Belum Dibaca</a>
                <a href="{{ route('notifications.index', ['filter' => 'read']) }}" class="btn {{ $filter === 'read' ? 'btn-primary' : 'btn-white bg-white text-secondary' }} px-4 font-weight-bold" style="font-size: 0.85rem; border: 1px solid #e2e8f0;">Sudah Dibaca</a>
            </div>

            <!-- Tombol Tandai Semua Dibaca -->
            @if ($hasUnread)
                <button type="button" id="btn-mark-all-read" class="btn btn-light border font-weight-bold px-3 py-2 shadow-sm" style="border-radius: 8px; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s;">
                    <i class="fas fa-check-double text-success"></i> Tandai Semua Dibaca
                </button>
            @endif
        </div>

        <!-- DAFTAR NOTIFIKASI -->
        <div id="notifications-list-container">
            @forelse ($notifications as $notification)
                @include('notifications.components.notification-item', ['notification' => $notification])
            @empty
                <!-- Empty State -->
                <x-empty-state 
                    icon="fas fa-bell-slash" 
                    title="Belum ada notifikasi." 
                    description="Semua aktivitas terbaru akan muncul di sini."
                />
            @endforelse
        </div>

        <!-- PAGINATION -->
        @if ($notifications->hasPages())
            <div class="d-flex justify-content-center mt-4">
                {{ $notifications->links() }}
            </div>
        @endif
    </div>
@endsection

@section('js')
    @parent
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Klik "Tandai Dibaca" pada list
        $(document).on('click', '.btn-mark-read', function(e) {
            e.preventDefault();
            let btn = $(this);
            let id = btn.data('id');
            let item = btn.closest('.notification-item');
            
            $.ajax({
                url: "{{ url('notifications') }}/" + id + "/read",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    // Update visual status
                    item.removeClass('bg-light').css('border-left', '1px solid #f1f5f9');
                    item.find('.badge-danger').remove();
                    btn.remove();
                    
                    // Update dropdown navbar jika ada
                    let navbarItem = $('.navbar-notification-item[data-id="' + id + '"]');
                    if (navbarItem.length) {
                        navbarItem.removeClass('bg-light font-weight-bold');
                        navbarItem.find('.unread-dot').remove();
                    }
                    
                    // Update badge count navbar
                    let badge = $('.notification-bell-badge');
                    if (badge.length) {
                        let count = parseInt(badge.text().trim()) - 1;
                        if (count > 0) {
                            badge.text(count);
                        } else {
                            badge.remove();
                            $('#navbar-mark-all-read').remove();
                            $('#btn-mark-all-read').remove();
                        }
                    }
                }
            });
        });

        // Klik "Tandai Semua Dibaca" dari halaman utama
        $('#btn-mark-all-read').on('click', function(e) {
            e.preventDefault();
            
            $.ajax({
                url: "{{ route('notifications.readAll') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    // Update all items in list
                    let items = $('.notification-item');
                    items.removeClass('bg-light').css('border-left', '1px solid #f1f5f9');
                    items.find('.badge-danger').remove();
                    items.find('.btn-mark-read').remove();
                    
                    // Update dropdown navbar
                    $('.navbar-notification-item').removeClass('bg-light font-weight-bold');
                    $('.unread-dot').remove();
                    $('.notification-bell-badge').remove();
                    $('#navbar-mark-all-read').remove();
                    
                    // Remove mark all read buttons
                    $('#btn-mark-all-read').remove();
                }
            });
        });
    });
    </script>
@stop