@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 }}"
                                    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">Mới</span>
                                        @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