@extends((auth()->user()->user_type !== 'staff') ? 'admin.layouts.app' : 'employee.layouts.app')
@section('title', get_setting('site_name').' Notice')
@section('content')
    <style>
        .notice-page-item {
            border: 1px solid var(--ui-border);
            background: #fff;
            box-shadow: 0 8px 24px rgba(17, 24, 39, .04);
        }
        .notice-dismiss-btn {
            align-self: center;
            border-radius: 10px;
            min-width: 36px;
        }
    </style>
    @php
        $notificationService = app(\App\Services\HeaderNotificationService::class);
        $showBranchOnItems = $notificationService->showBranchOnItems();
        $branchLabel = $notificationService->branchContextLabel();
    @endphp

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center flex-wrap" style="gap: 10px;">
            <div>
                <h5 class="mb-1">{{ __('Notifications') }}</h5>
                @if($branchLabel)
                    <small class="text-muted">{{ __('Branch') }}: {{ $branchLabel }}</small>
                @endif
            </div>
            <span class="badge badge-primary badge-pill px-3 py-2">{{ $notice->count() }} {{ __('unread') }}</span>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="notice_reload">
                        @forelse($notice as $notify)
                            @php
                                $visual = $notificationService->visualForType($notify->type);
                                $employeeName = $notify->staff?->user?->name;
                                $branchName = $notify->staff?->warehouse?->name;
                            @endphp
                            <div class="header-notify-item notice-page-item mb-2">
                                <span class="header-notify-icon tone-{{ $visual['tone'] }}">
                                    <i class="mdi {{ $visual['icon'] }}"></i>
                                </span>
                                <span class="header-notify-content">
                                    <span class="header-notify-item-title">{{ $notify->type ?: __('Notification') }}</span>
                                    <span class="header-notify-item-text">{{ $notify->content }}</span>
                                    <span class="header-notify-meta">
                                        @if($employeeName)
                                            <span>{{ $employeeName }}</span>
                                        @endif
                                        @if($showBranchOnItems && $branchName)
                                            <span class="header-notify-branch">{{ $branchName }}</span>
                                        @endif
                                        @if($notify->created_at)
                                            <span>{{ $notify->created_at->diffForHumans() }}</span>
                                        @endif
                                    </span>
                                </span>
                                <button type="button"
                                        class="btn btn-sm btn-light notice-dismiss-btn"
                                        onclick="Notification_read({{ $notify->id }}, this)"
                                        title="{{ __('Mark as read') }}">
                                    <i class="mdi mdi-check"></i>
                                </button>
                            </div>
                        @empty
                            <div class="header-notify-empty">
                                <i class="mdi mdi-bell-off-outline"></i>
                                <p>{{ __('No new notifications') }}</p>
                                <small class="text-muted">{{ __('You are all caught up for now.') }}</small>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection