@extends('layouts.template.main')

@section('content')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon">
                                    <i data-feather="bell"></i>
                                </div>
                                Thông báo của tôi
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content -->
        <div class="container-xl px-4 mt-4">
            <div class="row">

                <div class="col-xl-10 col-lg-12 mx-auto">
                    <div class="card shadow-sm border-0 mb-4">
                        <div
                            class="card-header bg-white py-3 border-bottom d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <i data-feather="bell" class="text-primary me-2" style="width: 20px; height: 20px;"></i>
                                <span class="fw-bold text-dark fs-6 me-2">Tất cả thông báo</span>
                                <span class="badge bg-primary-soft text-primary rounded-pill px-2 py-1">
                                    {{ $allNotifs->whereNull('read_at')->count() }}
                                </span>

                            </div>
                            @if ($allNotifs->whereNull('read_at')->count() > 0)
                                <a href="{{ route('kanban.notifications.mark_all_read') }}"
                                    class="text-primary fw-medium">Đánh dấu đã
                                    đọc</a>
                            @endif
                        </div>

                        <div class="list-group list-group-flush">
                            @forelse ($allNotifs as $notification)
                                @php
                                    $notifData = is_string($notification->data)
                                        ? json_decode($notification->data, true)
                                        : (array) $notification->data;

                                    $notifUrl = $notifData['url'] ?? ($notifData['link'] ?? '#');
                                    $notifMsg = $notifData['message'] ?? '';
                                    $taskTitle = $notifData['task_title'] ?? null;
                                    $actorName = $notifData['actor_name'] ?? null;
                                    $notifType = $notification->type ?? '';
                                    $isUnread = is_null($notification->read_at);

                                    // Thiết lập icon, màu nền và tiêu đề theo loại thông báo
                                    $icon = 'bell';
                                    $bgClass = 'bg-secondary text-white';
                                    $typeBadge = 'bg-secondary-soft text-secondary';
                                    $typeName = 'Thông báo';

                                    switch ($notifType) {
                                        case 'kanban_assignee_added':
                                            $icon = 'user-plus';
                                            $bgClass = 'bg-primary text-white';
                                            $typeBadge = 'bg-primary-soft text-primary';
                                            $typeName = 'Giao việc';
                                            break;
                                        case 'kanban_assignee_removed':
                                            $icon = 'user-x';
                                            $bgClass = 'bg-warning text-white';
                                            $typeBadge = 'bg-warning-soft text-warning';
                                            $typeName = 'Gỡ người phụ trách';
                                            break;
                                        case 'kanban_task_deleted':
                                            $icon = 'trash-2';
                                            $bgClass = 'bg-danger text-white';
                                            $typeBadge = 'bg-danger-soft text-danger';
                                            $typeName = 'Xóa task';
                                            break;
                                        case 'kanban_task_status_changed':
                                            $icon = 'check-circle';
                                            $bgClass = 'bg-success text-white';
                                            $typeBadge = 'bg-success-soft text-success';
                                            $typeName = 'Trạng thái';
                                            break;
                                        case 'kanban_task_moved':
                                            $icon = 'move';
                                            $bgClass = 'bg-info text-white';
                                            $typeBadge = 'bg-info-soft text-info';
                                            $typeName = 'Di chuyển';
                                            break;
                                    }
                                @endphp

                                <a href="{{ $notifUrl }}"
                                    data-id="{{ $notification->id }}"
                                    data-unread="{{ $isUnread ? '1' : '0' }}"
                                    class="list-group-item list-group-item-action p-3 d-flex align-items-start text-decoration-none border-bottom {{ $isUnread ? 'bg-light border-start border-4 border-primary' : 'bg-white' }}"
                                    style="transition: background-color 0.2s ease;">

                                    <!-- Icon loại thông báo -->
                                    <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 {{ $bgClass }} me-3 shadow-sm"
                                        style="width: 42px; height: 42px;">
                                        <i data-feather="{{ $icon }}" style="width: 18px; height: 18px;"></i>
                                    </div>

                                    <!-- Nội dung thông báo -->
                                    <div class="flex-grow-1 min-w-0 me-3">
                                        <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                                            <span
                                                class="badge {{ $typeBadge }} rounded-pill px-2 py-0.5 small fw-normal">
                                                {{ $typeName }}
                                            </span>

                                            @if ($taskTitle)
                                                <span class="text-truncate fw-semibold text-dark small"
                                                    style="max-width: 320px;">
                                                    <i data-feather="bookmark" class="me-1"
                                                        style="width: 12px; height: 12px;"></i>{{ $taskTitle }}
                                                </span>
                                            @endif

                                            <span class="text-muted small ms-auto d-flex align-items-center">
                                                <i data-feather="clock" class="me-1"
                                                    style="width: 12px; height: 12px;"></i>
                                                {{ $notification->created_at->diffForHumans() }}
                                                <span
                                                    class="d-none d-md-inline ms-1 text-muted">({{ $notification->created_at->format('H:i, d/m/Y') }})</span>
                                            </span>
                                        </div>

                                        <div class="text-secondary {{ $isUnread ? 'fw-bold text-dark' : '' }}"
                                            style="line-height: 1.45; font-size: 0.925rem;">
                                            {{ $notifMsg }}
                                        </div>
                                    </div>

                                    <!-- Trạng thái chưa đọc / icon mũi tên -->
                                    <div class="d-flex align-items-center flex-shrink-0 ms-2">
                                        @if ($isUnread)
                                            <span class="badge bg-primary rounded-pill me-2 px-2 py-1 small notif-badge-new">Mới</span>
                                            <button type="button" class="btn btn-sm btn-outline-primary py-1 px-2 me-2 btn-mark-single-read"
                                                data-id="{{ $notification->id }}"
                                                title="Đánh dấu thông báo này đã đọc"
                                                style="font-size: 0.8rem; border-radius: 20px;">
                                                <i data-feather="check" style="width: 13px; height: 13px;" class="me-1"></i>Đã đọc
                                            </button>
                                        @endif
                                        <i data-feather="chevron-right" class="text-muted"
                                            style="width: 18px; height: 18px;"></i>
                                    </div>
                                </a>
                            @empty
                                <div class="text-center py-5 text-muted">
                                    <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-3 text-muted"
                                        style="width: 64px; height: 64px;">
                                        <i data-feather="bell-off" style="width: 30px; height: 30px;"></i>
                                    </div>
                                    <h6 class="text-dark fw-bold mb-1">Không có thông báo nào</h6>
                                    <p class="small text-muted mb-0">Khi có hoạt động hoặc công việc mới được phân công,
                                        thông báo sẽ hiển thị tại đây.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </main>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var READ_URL = '{{ route('kanban.notifications.read') }}';
            var CSRF_TOKEN = '{{ csrf_token() }}';

            // Đánh dấu đã đọc cho từng thông báo
            document.querySelectorAll('.btn-mark-single-read').forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    var notifId = this.dataset.id;
                    var item = this.closest('.list-group-item');
                    var currentBtn = this;

                    currentBtn.disabled = true;
                    currentBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" style="width:10px;height:10px;"></span>...';

                    fetch(READ_URL, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': CSRF_TOKEN,
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({ ids: [notifId] })
                    })
                    .then(function(res) { return res.json(); })
                    .then(function(data) {
                        if (data && data.success) {
                            item.classList.remove('bg-light', 'border-start', 'border-4', 'border-primary');
                            item.classList.add('bg-white');
                            item.dataset.unread = '0';
                            var descEl = item.querySelector('.text-secondary');
                            if (descEl) descEl.classList.remove('fw-bold', 'text-dark');
                            var badgeNew = item.querySelector('.notif-badge-new');
                            if (badgeNew) badgeNew.remove();
                            currentBtn.remove();

                            // Cập nhật số đếm ở header
                            var headerBadge = document.querySelector('.card-header .badge');
                            if (headerBadge) {
                                var currentCount = parseInt(headerBadge.textContent.trim(), 10) || 0;
                                var newCount = Math.max(0, currentCount - 1);
                                headerBadge.textContent = newCount;
                                if (newCount === 0) {
                                    var markAllBtn = document.querySelector('a[href="{{ route('kanban.notifications.mark_all_read') }}"]');
                                    if (markAllBtn) markAllBtn.remove();
                                }
                            }
                        }
                    })
                    .catch(function(err) {
                        console.error('Lỗi đánh dấu đã đọc:', err);
                        currentBtn.disabled = false;
                        currentBtn.textContent = 'Đã đọc';
                    });
                });
            });

            // Khi bấm vào cả dòng thông báo để xem task, tự động đánh dấu thông báo này là đã đọc
            document.querySelectorAll('.list-group-item[data-unread="1"]').forEach(function(item) {
                item.addEventListener('click', function(e) {
                    if (e.target.closest('.btn-mark-single-read')) return;
                    var notifId = this.dataset.id;
                    if (notifId) {
                        fetch(READ_URL, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': CSRF_TOKEN,
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify({ ids: [notifId] })
                        }).catch(function() {});
                    }
                });
            });
        });
    </script>
@endpush