@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
  @include('layouts.navbars.auth.topnav', ['title' => ''])
  @include('components.search')
  <div class="container-fluid py-4">
    {{-- Alert --}}
    @include('components.kanban-alert')

    {{-- Notifications Section --}}
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header pb-0">
            <div class="d-flex justify-content-between align-items-center">
              <h6>Notifikasi</h6>
              <div class="d-flex align-items-center gap-2">
                {{-- Tombol Mark All as Read --}}
                <button id="markAllReadBtn" class="btn btn-sm btn-outline-primary">
                  <i class="fas fa-check-double me-1"></i> Tandai Semua Sudah Dibaca
                </button>
                <div class="filter-dropdown">
                  <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                          id="filterDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-filter"></i>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="filterDropdown">
                    <li><a class="dropdown-item filter-option" href="#" data-filter="all">Semua Notifikasi</a></li>
                    <li><a class="dropdown-item filter-option" href="#"
                         data-filter="unread">Belum Dibaca
                        </a></li>
                    <li><a class="dropdown-item filter-option" href="#" data-filter="read">Sudah Dibaca</a></li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item filter-option" href="#" data-filter="card">Aktifitas card</a></li>
                    <li><a class="dropdown-item filter-option" href="#" data-filter="board">Aktifitas board</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body px-0 pt-0 pb-2">
            <div class="notifications-container">
              @if ($notifications->count() > 0)
                @foreach ($notifications as $notification)
                  <div class="notification-item {{ $notification->is_read ? 'read' : 'unread' }}"
                       data-id="{{ $notification->id }}" data-type="{{ $notification->action }}"
                       data-read="{{ $notification->is_read ? 'true' : 'false' }}"
                       data-created="{{ $notification->created_at->format('Y-m-d H:i:s') }}"
                       data-user="{{ \App\Helpers\NotificationHelper::getDisplayName($notification->actor) }}"
                       data-target="{{ $notification->card ? $notification->card->title : ($notification->board ? $notification->board->title : 'N/A') }}"
                       data-board="{{ $notification->board ? $notification->board->title : 'N/A' }}"
                       data-board-id="{{ $notification->board ? $notification->board->id : '' }}"
                       data-enable-mis="{{ $notification->board && $notification->board->enable_mis ? '1' : '0' }}"
                       data-card-id="{{ $notification->card ? $notification->card->id : '' }}">
                    <div class="d-flex align-items-start px-4 py-3 position-relative">
                      {{-- User Avatar --}}
                      <div class="notification-avatar me-3">
                        @if ($notification->actor && $notification->actor->image)
                          <img src="{{ asset('/storage/' . $notification->actor->image) }}"
                               alt="{{ $notification->actor->firstname ?? 'User' }}"
                               class="rounded-circle" width="40" height="40">
                        @else
                          <div
                               class="avatar-circle bg-{{ \App\Helpers\NotificationHelper::getAvatarColor($notification->action) }}">
                            {{ $notification->actor && $notification->actor->username === 'msjit' ? 'A' : strtoupper(substr(\App\Helpers\NotificationHelper::getDisplayName($notification->actor), 0, 1)) }}
                          </div>
                        @endif
                      </div>

                      {{-- Notification Content --}}
                      <div class="grow notification-content me-2">
                        <div class="notification-header">
                          <span
                                class="fw-bold text-dark">{{ \App\Helpers\NotificationHelper::getDisplayName($notification->actor) }}</span>
                        </div>
                        <div class="notification-text text-muted mt-1">
                          {!! \App\Helpers\NotificationHelper::formatDescription($notification->description ?? \App\Helpers\NotificationHelper::getActionText($notification->action) . ' ' . ($notification->card ? $notification->card->title : ($notification->board ? $notification->board->title : '')), $notification->actor) !!}
                          <div class="mt-1">
                            <small class="text-muted">
                              {{ $notification->created_at->diffForHumans() }}
                            </small>
                          </div>
                        </div>
                      </div>

                      {{-- Close Button --}}
                      <button type="button" class="btn-close-notification ms-auto"
                              data-id="{{ $notification->id }}" aria-label="Close">
                        <i class="fas fa-times text-muted"></i>
                      </button>

                      {{-- Unread Indicator --}}
                      @if (!$notification->is_read)
                        <div class="unread-dot"></div>
                      @endif
                    </div>
                  </div>
                @endforeach
              @else
                <div class="empty-notifications">
                  <i class="fas fa-bell-slash"></i>
                  <h6>Tidak ada notifikasi</h6>
                  <p>Anda sudah melihat semua notifikasi! Notifikasi baru akan muncul di sini.</p>
                </div>
              @endif
            </div>


            {{-- Pagination --}}
            <div class="d-flex justify-content-between align-items-center p-3 bg-white rounded ">
              <div>
                Data {{ $notifications->firstItem() }} - {{ $notifications->lastItem() }}
                dari {{ $notifications->total() }} data.
              </div>
              <div>
                {{ $notifications->appends(request()->query())->links('pagination::bootstrap-4') }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  {{-- Notification Detail Modal --}}
  <div class="modal fade" id="notificationDetailModal" tabindex="-1" aria-labelledby="notificationDetailModalLabel"
       aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
      <div class="modal-content">
        <div class="modal-header bg-primary justify-content-center position-relative">
          <h5 class="modal-title fw-bold text-white" id="notificationDetailModalLabel">
            Detail Notifikasi
          </h5>
          <button type="button" class="btn-close text-white position-absolute" style="right: 16px;"
                  data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body py-3">
          <div class="notification-detail">
            {{-- User Info --}}
            <div class="d-flex align-items-start mb-4">
              <div class="notification-avatar me-3" id="modalAvatar">
                <div class="avatar-circle bg-primary">
                  <i class="fas fa-user"></i>
                </div>
              </div>
              <div class="flex-grow-1">
                <h6 id="modalUserName">Nama Pengguna</h6>
                <small id="modalDateTime">Tanggal dan waktu</small>
              </div>
              <span class="badge bg-gradient-primary ms-auto" id="modalStatus">Belum Dibaca</span>
            </div>

            {{-- Activity Details --}}
            <div class="activity-details">
              <div class="card bg-light mb-3">
                <div class="card-body p-3">
                  <div class="mb-3">
                    <small class="fw-bold d-block mb-1 text-dark">Jenis Aktivitas</small>
                    <span class="text-dark" id="modalActivityType">Aktivitas</span>
                  </div>
                  <div class="mb-3">
                    <small class="fw-bold d-block mb-1 text-dark">Item Terkait</small>
                    <span class="text-dark" id="modalTarget">Target Item</span>
                  </div>
                  <div>
                    <small class="fw-bold d-block mb-2 text-dark">Deskripsi</small>
                    <div class="description-box p-3">
                      <p class="mb-0" id="modalDescription">Deskripsi aktivitas akan muncul di sini</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {{-- Additional Info --}}
            <div class="additional-info" id="modalAdditionalInfo" style="display: none;">
              <div class="card border board-card-clickable" data-board-id="" style="cursor: pointer;">
                <div class="card-body p-3">
                  <div class="d-flex align-items-center">
                    <i class="fas fa-folder-open text-primary me-2"></i>
                    <div class="flex-grow-1">
                      <small class="text-muted d-block mb-1">Board / Project</small>
                      <span class="fw-bold text-primary" id="modalBoardName">Nama Board</span>
                    </div>
                    <i class="fas fa-arrow-right text-muted" style="font-size: 14px;"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer border-0 py-2">
          <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">
            <i class="fas fa-times me-1"></i>
            Tutup
          </button>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('css')
  <style>
    .notifications-container {
      max-height: 70vh;
      overflow-y: auto;
      overflow-x: hidden;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .d-flex.justify-content-center {
      padding-bottom: 1rem;
    }

    .card-body {
      overflow-x: hidden;
    }

    .notification-item,
    .notification-item>.d-flex {
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
      word-break: break-word;
    }

    .card-body,
    .card,
    .row,
    .col-12 {
      overflow-x: hidden;
    }

    .notification-item {
      border-bottom: 1px solid #e9ecef;
      transition: all 0.3s ease;
      position: relative;
      cursor: pointer;
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
    }

    /* Unread notifications - White background */
    .notification-item.unread {
      background-color: #ffffff;
      transition: background-color 0.3s ease;
    }

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

    /* Read notifications - Darker gray background for better visibility */
    .notification-item.read,
    .notification-item[data-read="true"] {
      background-color: #e9ecef !important;
      opacity: 0.85 !important;
      transition: background-color 0.3s ease, opacity 0.3s ease;
    }

    .notification-item.read:hover,
    .notification-item[data-read="true"]:hover {
      background-color: #dee2e6 !important;
    }

    .notification-avatar {
      position: relative;
    }

    .avatar-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: white;
      font-size: 16px;
    }

    .notification-content {
      min-width: 0;
    }

    .notification-header {
      font-size: 14px;
      line-height: 1.4;
    }

    .notification-text {
      font-size: 14px;
      line-height: 1.4;
    }

    .notification-text strong {
      color: #2c3e50;
      font-weight: 600;
    }

    .unread-dot {
      position: absolute;
      right: 16px;
      width: 8px;
      height: 8px;
      background-color: #3b82f6;
      border-radius: 50%;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Filter dropdown styling */
    .filter-option.active {
      background-color: #3b82f6;
      color: white;
    }

    /* Empty state styling */
    .empty-notifications {
      text-align: center;
      padding: 4rem 2rem;
    }

    .empty-notifications i {
      font-size: 3rem;
      color: #9ca3af;
      margin-bottom: 1rem;
    }

    .empty-notifications h6 {
      color: #6b7280;
      margin-bottom: 0.5rem;
    }

    .empty-notifications p {
      color: #9ca3af;
      font-size: 14px;
    }

    /* Modal Styling */
    #notificationDetailModal .modal-content {
      border: none;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      max-width: 450px;
      margin: 0 auto;
    }

    #notificationDetailModal .modal-header {
      background: linear-gradient(135deg, rgba(45, 206, 137, 0.08) 0%, rgba(45, 206, 204, 0.08) 100%);
      border-radius: 12px 12px 0 0;
      padding: 1rem 1.25rem 0.75rem 1.25rem;
    }

    #notificationDetailModal .modal-title {
      font-weight: 600;
      color: #344767;
      font-size: 1rem;
    }

    #notificationDetailModal .modal-body {
      padding: 1rem 1.25rem;
    }

    #notificationDetailModal .modal-footer {
      padding: 0.75rem 1.25rem 1rem 1.25rem;
    }

    /* Time display styling */
    #modalDateTime {
      color: #6c757d !important;
      display: inline-block;
    }

    /* Enhanced modal styling */
    .description-box {
      border: 1px solid #e9ecef;
      transition: all 0.2s ease;
      background: #ffffff;
      border-radius: 12px !important;
    }

    .description-box p {
      color: #495057 !important;
      font-weight: 500;
      font-size: 13px;
      line-height: 1.5;
    }

    .description-box strong {
      color: #2c3e50;
      font-weight: 700;
    }

    /* Activity section icons */
    .activity-details .fas {
      font-size: 14px;
    }

    /* Improved spacing and typography */
    .activity-details .card-body .row {
      align-items: flex-start;
    }

    .activity-details .fw-bold {
      font-size: 14px;
      line-height: 1.4;
    }

    /* User info styling */
    #modalUserName {
      color: #2c3e50 !important;
      font-weight: 700;
      margin-bottom: 2px;
    }

    /* Modal spacing improvements */
    .modal-body .mb-4 {
      padding-bottom: 1rem;
      border-bottom: 1px solid #f1f3f4;
    }

    /* Activity Type styling */
    #modalActivityType {
      font-size: 14px;
      text-transform: uppercase;
    }

    #modalTarget {
      font-size: 14px;
      text-transform: uppercase;
    }

    #modalDescription {
      font-size: 14px;
      line-height: 1.5;
    }

    .notification-detail .avatar-circle {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: white;
      font-size: 16px;
    }

    .activity-details .card {
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .additional-info .card {
      transition: all 0.2s ease;
    }

    /* Board card clickable styling */
    .board-card-clickable {
      transition: all 0.2s ease;
      cursor: pointer !important;
    }

    .board-card-clickable * {
      cursor: pointer !important;
    }

    .board-card-clickable:hover #modalBoardName {
      text-decoration: underline;
    }
    .additional-info .fa-arrow-right {
      transition: transform 0.2s ease;
    }

    #modalStatus.badge {
      font-size: 10px;
      border-radius: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 6px 10px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .fs-6 {
      font-size: 0.95rem !important;
    }

    /* Close notification button styling */
    .btn-close-notification {
      background: transparent;
      border: none;
      padding: 8px;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-close-notification:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }

    .btn-close-notification:focus {
      outline: none;
      box-shadow: none;
    }

    .btn-close-notification i {
      font-size: 14px;
    }
  </style>
@endpush

@push('js')
  <script>
    document.getElementById('markAllReadBtn').addEventListener('click', function() {
      fetch("{{ route('notifications.markAllRead') }}", {
          method: "POST",
          headers: {
            "X-CSRF-TOKEN": "{{ csrf_token() }}",
            "Accept": "application/json"
          }
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            // Tampilkan alert sukses
            showAlert('success', 'Semua notifikasi sudah dibaca!');

            // Auto refresh setelah 1 detik
            setTimeout(() => {
              window.location.reload();
            }, 1000);
          }
        })
        .catch(() => {
          // Tampilkan alert error
          showAlert('danger', 'Terjadi error saat ubah status menjadi sudah dibaca.');
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
      let currentFilter = 'all';

      // Click handlers
      document.addEventListener('click', function(e) {
        // Handle filter clicks
        if (e.target.classList.contains('filter-option')) {
          e.preventDefault();
          const filter = e.target.dataset.filter;
          const url = new URL(window.location.href);
          url.searchParams.set('filter', filter);
          url.searchParams.set('page', 1); // Reset ke halaman 1 saat filter berubah
          window.location.href = url.toString();

          // Update active filter
          document.querySelectorAll('.filter-option').forEach(option => {
            option.classList.remove('active');
          });
          e.target.classList.add('active');

          applyFilter(filter);
          currentFilter = filter;
        }

        // Handle close notification button
        if (e.target.closest('.btn-close-notification')) {
          e.preventDefault();
          e.stopPropagation();
          const button = e.target.closest('.btn-close-notification');
          const notificationId = button.dataset.id;
          const item = button.closest('.notification-item');

          // Delete notification directly without confirmation
          deleteNotification(notificationId, item);
        }

        // Handle notification item click (show detail modal)
        if (e.target.closest('.notification-item') && !e.target.closest(
            '.btn-close-notification')) {
          e.preventDefault();
          const notificationItem = e.target.closest('.notification-item');
          const notificationId = notificationItem.dataset.id;
          const isRead = notificationItem.dataset.read === 'true';

          console.log('Notification clicked:', {
            id: notificationId,
            isRead: isRead,
            currentClass: notificationItem.className
          });

          // Mark as read when clicked if it's unread - DO THIS FIRST!
          if (!isRead) {
            console.log('Marking notification as read BEFORE showing modal...');
            markAsReadOnClick(notificationId, notificationItem);

            // Wait for the API call to complete before showing modal
            setTimeout(() => {
              showNotificationDetail(notificationItem);
            }, 500); // Increased timeout for API completion
          } else {
            console.log('Notification already read, showing modal immediately');
            showNotificationDetail(notificationItem);
          }
        }

        // Handle board card click in modal (entire card clickable)
        if (e.target.closest('.board-card-clickable')) {
          e.preventDefault();
          e.stopPropagation();
          const boardCard = e.target.closest('.board-card-clickable');
          const boardId = boardCard.dataset.boardId;
          const cardId = boardCard.dataset.cardId;
          const enableMis = boardCard.dataset.enableMis === '1';
          
          console.log('Board card clicked, IDs:', { boardId, cardId });

          if (cardId && typeof openViewCardModal === 'function') {
            // Close the modal first
            const modal = bootstrap.Modal.getInstance(document.getElementById(
              'notificationDetailModal'));
            if (modal) {
              modal.hide();
            }

            // Open card modal directly on this page after modal closes
            setTimeout(() => {
              openViewCardModal(cardId);
            }, 300);
          } else if (boardId && boardId !== '' && boardId !== 'undefined') {
            console.log('Board ID is valid, proceeding with navigation...');
            // Close the modal first
            const modal = bootstrap.Modal.getInstance(document.getElementById(
              'notificationDetailModal'));
            if (modal) {
              modal.hide();
            }

            // Navigate after modal closes
            setTimeout(() => {
              let targetUrl;
              const boardBaseUrl = enableMis ? `{{ url('misintern/show') }}` : `{{ url('boards/show') }}`;
              // If card ID exists, redirect to board with auto_open_card parameter
              if (cardId && cardId !== '' && cardId !== 'undefined') {
                targetUrl = `${boardBaseUrl}/${boardId}?auto_open_card=${cardId}`;
                console.log('Navigating to card in board:', targetUrl);
              } else {
                // Otherwise, just go to the board
                targetUrl = `${boardBaseUrl}/${boardId}`;
                console.log('Navigating to board:', targetUrl);
              }
              window.location.href = targetUrl;
            }, 300);
          } else {
            console.error('Board ID is invalid or empty:', boardId);
          }
        }
      });

      function deleteNotification(notificationId, item) {
        // Remove from UI immediately for better UX
        item.style.transition = 'all 0.3s ease';
        item.style.opacity = '0.5';

        fetch(`{{ url('notifications') }}/${notificationId}`, {
            method: 'DELETE',
            headers: {
              'X-CSRF-TOKEN': '{{ csrf_token() }}',
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest'
            }
          })
          .then(response => {
            if (!response.ok) {
              throw new Error('Koneksi gagal');
            }
            return response.json();
          })
          .then(data => {
            if (data.success) {
              // Animate removal
              item.style.height = item.offsetHeight + 'px';
              item.offsetHeight; // Force reflow
              item.style.height = '0';
              item.style.padding = '0';
              item.style.margin = '0';
              item.style.borderWidth = '0';

              setTimeout(() => {
                item.remove();
                showAlert('success', 'Notifikasi berhasil dihapus!');

                // Check if no notifications left
                const remainingNotifications = document.querySelectorAll(
                  '.notification-item');
                if (remainingNotifications.length === 0) {
                  document.querySelector('.notifications-container').innerHTML = `
                  <div class="empty-notifications">
                    <i class="fas fa-bell-slash"></i>
                    <h6>Tidak ada Notifikasi</h6>
                    <p>Anda sudah melihat semua notifikasi! Notifikasi baru akan muncul di sini.</p>
                  </div>
                `;
                }
              }, 300);
            } else {
              // Revert UI changes if server request failed
              item.style.opacity = '1';
              showAlert('danger', 'Gagal menghapus notifikasi.');
            }
          })
          .catch(error => {
            console.error('Error deleting notification:', error);
            // Revert UI changes on error
            item.style.opacity = '1';
            showAlert('danger', 'Error saat menghapus notifikasi');
          });
      }

      function applyFilter(filter) {
        const notifications = document.querySelectorAll('.notification-item');

        notifications.forEach(item => {
          const isRead = item.dataset.read === 'true';
          const type = item.dataset.type;
          let show = true;

          switch (filter) {
            case 'unread':
              show = !isRead;
              break;
            case 'read':
              show = isRead;
              break;
            case 'card':
              show = type.includes('card') || type.includes('comment');
              break;
            case 'board':
              show = type.includes('board') || type.includes('list');
              break;
            case 'all':
            default:
              show = true;
              break;
          }

          item.style.display = show ? 'block' : 'none';
        });
      }

      function showNotificationDetail(notificationItem) {
        const data = {
          id: notificationItem.dataset.id,
          type: notificationItem.dataset.type,
          isRead: notificationItem.dataset.read === 'true',
          createdAt: notificationItem.dataset.created,
          userName: notificationItem.dataset.user,
          target: notificationItem.dataset.target,
          boardName: notificationItem.dataset.board,
          boardId: notificationItem.dataset.boardId,
          cardId: notificationItem.dataset.cardId,
          enableMis: notificationItem.dataset.enableMis === '1'
        };

        console.log('Notification data for modal:', data);
        console.log('Board ID from dataset:', notificationItem.dataset.boardId);
        console.log('Card ID from dataset:', notificationItem.dataset.cardId);

        // Get elements from the notification item
        const avatarElement = notificationItem.querySelector('.avatar-circle, .notification-avatar img');
        const descriptionElement = notificationItem.querySelector('.notification-text');

        // Get the actual description HTML (preserving the formatting)
        const descriptionClone = descriptionElement.cloneNode(true);
        const timeElement = descriptionClone.querySelector('small');
        if (timeElement) {
          timeElement.remove();
        }
        const actualDescription = descriptionClone.innerHTML.trim();

        // Update modal content
        updateModalContent(data, avatarElement, actualDescription);

        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('notificationDetailModal'));
        modal.show();
      }

      function updateModalContent(data, avatarElement, description) {
        // Update user info
        document.getElementById('modalUserName').textContent = data.userName && data.userName.trim() !== '' ? data.userName : 'Unknown User';
        document.getElementById('modalDateTime').textContent = formatDateTime(data.createdAt);

        // Update status badge
        const statusBadge = document.getElementById('modalStatus');
        statusBadge.textContent = data.isRead ? 'Read' : 'Unread';
        statusBadge.className = `badge bg-gradient-${data.isRead ? 'secondary' : 'primary'} badge-sm`;

        // Update activity details
        document.getElementById('modalActivityType').textContent = getActivityTypeText(data.type);
        document.getElementById('modalTarget').textContent = data.target;

        // Use the actual description passed from the notification item (as HTML)
        document.getElementById('modalDescription').innerHTML = description || createEnhancedDescription(data.type, data.target, data.createdAt);

        // Update avatar
        const modalAvatar = document.getElementById('modalAvatar');
        if (avatarElement && avatarElement.tagName === 'IMG') {
          modalAvatar.innerHTML =
            `<img src="${avatarElement.src}" alt="User" class="rounded-circle" width="45" height="45">`;
        } else if (avatarElement) {
          let avatarLetter = 'S';
          const displayUserName = data.userName;
          if (displayUserName === 'Admin MIS') {
            avatarLetter = 'A';
          } else if (displayUserName && displayUserName !== 'System' && displayUserName !== 'Unknown User') {
            avatarLetter = displayUserName.charAt(0).toUpperCase();
          }
          // Keep the original color classes from the notification item
          modalAvatar.innerHTML =
            `<div class="avatar-circle ${avatarElement.className}">${avatarLetter}</div>`;
        } else {
          modalAvatar.innerHTML = '<div class="avatar-circle bg-secondary">S</div>';
        }

        // Update additional info
        const additionalInfo = document.getElementById('modalAdditionalInfo');
        if (data.boardName !== 'N/A' && data.boardId && data.boardId !== '' && data.boardId !==
          'undefined') {
          const boardNameElement = document.getElementById('modalBoardName');
          boardNameElement.textContent = data.boardName;
          
          // Set data attributes on the card element
          const boardCard = document.querySelector('.board-card-clickable');
          if (boardCard) {
            boardCard.dataset.boardId = data.boardId;
            boardCard.dataset.cardId = data.cardId || '';
            boardCard.dataset.enableMis = data.enableMis ? '1' : '0';
            console.log('Updated board card with IDs:', { boardId: data.boardId, cardId: data.cardId });
          }

          additionalInfo.style.display = 'block';
        } else {
          console.log('Board info not available:', {
            boardName: data.boardName,
            boardId: data.boardId
          });
          additionalInfo.style.display = 'none';
        }
      }

      function formatDateTime(dateTimeString) {
        const date = new Date(dateTimeString);

        // Array nama bulan dalam bahasa Indonesia
        const months = [
          'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
          'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
        ];

        const day = date.getDate();
        const month = months[date.getMonth()];
        const year = date.getFullYear();
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        return `${day} ${month} ${year}, ${hours}:${minutes}:${seconds}`;
      }

      function createEnhancedDescription(activityType, target, createdAt) {
        const formattedTime = formatDateTime(createdAt);

        const descriptions = {
          'card_created': `Card Created at ${formattedTime}`,
          'card_updated': `Card Updated at ${formattedTime}`,
          'card_moved': `Card Moved at ${formattedTime}`,
          'card_deleted': `Card Deleted at ${formattedTime}`,
          'board_created': `Board Created at ${formattedTime}`,
          'board_updated': `Board Updated at ${formattedTime}`,
          'list_created': `List Created at ${formattedTime}`,
          'list_updated': `List Updated at ${formattedTime}`,
          'list_deleted': `List Deleted at ${formattedTime}`,
          'comment_added': `Comment Added at ${formattedTime}`,
          'comment_updated': `Comment Updated at ${formattedTime}`,
          'comment_deleted': `Comment Deleted at ${formattedTime}`,
          'attachment_added': `Attachment Added at ${formattedTime}`,
          'user_added': `User Added at ${formattedTime}`,
          'user_removed': `User Removed at ${formattedTime}`
        };

        return descriptions[activityType] || `Activity Performed at ${formattedTime}`;
      }

      function getActivityTypeText(type) {
        const typeMap = {
          'card_created': 'Card Created',
          'card_updated': 'Card Updated',
          'card_moved': 'Card Moved',
          'card_deleted': 'Card Deleted',
          'board_created': 'Board Created',
          'board_updated': 'Board Updated',
          'list_created': 'List Created',
          'list_updated': 'List Updated',
          'list_deleted': 'List Deleted',
          'comment_added': 'Comment Added',
          'comment_updated': 'Comment Updated',
          'comment_deleted': 'Comment Deleted',
          'attachment_added': 'Attachment Added',
          'user_added': 'User Added',
          'user_removed': 'User Removed'
        };
        return typeMap[type] || type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
      }

      function markAsReadOnClick(notificationId, notificationItem) {
        console.log('markAsReadOnClick called:', {
          id: notificationId,
          element: notificationItem,
          currentClasses: notificationItem.className,
          currentRead: notificationItem.dataset.read
        });

        // Make API call FIRST to ensure database is updated
        fetch(`{{ url('api/notifications') }}/${notificationId}/read`, {
            method: 'POST',
            headers: {
              'X-CSRF-TOKEN': '{{ csrf_token() }}',
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest'
            }
          })
          .then(response => {
            console.log('API response status:', response.status);
            return response.json();
          })
          .then(data => {
            console.log('API response data:', data);
            if (data.success) {
              console.log('API confirmed - applying visual changes...');

              // Apply visual changes AFTER API success
              notificationItem.classList.remove('unread');
              notificationItem.classList.add('read');
              notificationItem.dataset.read = 'true';

              // Force inline styles for immediate visibility
              notificationItem.style.setProperty('background-color', '#e9ecef', 'important');
              notificationItem.style.setProperty('opacity', '0.85', 'important');
              notificationItem.style.transition = 'all 0.3s ease';

              console.log('Visual changes applied. New class:', notificationItem.className);
              console.log('New styles applied:', {
                backgroundColor: notificationItem.style.backgroundColor,
                opacity: notificationItem.style.opacity
              });

              // Remove unread dot
              const unreadDot = notificationItem.querySelector('.unread-dot');
              if (unreadDot) {
                console.log('Removing unread dot');
                unreadDot.style.display = 'none';
              }

              // Update counter in sidebar if exists
              if (typeof updateNotificationCounterGlobal === 'function') {
                updateNotificationCounterGlobal();
              }

              console.log('Notification successfully marked as read and updated visually');

              // Optional: Refresh page after 2 seconds to ensure database state is reflected
              // setTimeout(() => {
              //     console.log('Auto-refreshing page to ensure data consistency...');
              //     window.location.reload();
              // }, 2000); 
              // dicommand karena akan membuat refresh sendiri saat di buka, notif jadi ketutup

            } else {
              console.error('API failed to mark notification as read:', data.message);
              alert('Failed to mark notification as read: ' + data.message);
            }
          })
          .catch(error => {
            console.error('Error calling API:', error);
            alert('Error marking notification as read. Please try again.');
          });
      }

    });
  </script>
@endpush