@php
    $recentTasks = \Illuminate\Support\Facades\DB::table('schedule_tasks')
        ->leftJoin('users', 'schedule_tasks.user_id', '=', 'users.user_id')
        ->select([
            'schedule_tasks.id',
            'schedule_tasks.title',
            'schedule_tasks.status',
            'schedule_tasks.config',
            'schedule_tasks.user_id',
            'schedule_tasks.created_at',
            'schedule_tasks.updated_at',
            \Illuminate\Support\Facades\DB::raw("COALESCE(users.name, IF(schedule_tasks.user_id = 0, 'System S', 'Unknown')) as user_name"),
        ])
        ->orderByDesc('schedule_tasks.id')
        ->limit(20)
        ->get()
        ->map(function ($task) {
            $config = json_decode($task->config, true) ?: [];
            $duration = '';
            if ($task->status == 2 && $task->created_at && $task->updated_at) {
                $start = strtotime($task->created_at);
                $end = strtotime($task->updated_at);
                $diff = $end - $start;
                $duration = $diff >= 60 ? intdiv($diff, 60) . 'm ' . ($diff % 60) . 's' : $diff . 's';
            }
            $file = '';
            if (isset($config['fileName'])) {
                $file = basename($config['fileName']);
            } elseif (isset($config['processId'])) {
                $file = 'Process: ' . $config['processId'];
            }
            $total = isset($config['fileName']) ? '' : '';
            $percent = $task->status == 2 ? 100 : ($task->status == 1 ? 50 : ($task->status == 0 ? 0 : 100));
            return (object)[
                'id' => $task->id,
                'title' => $task->title,
                'status' => (int)$task->status,
                'user' => $task->user_name,
                'file' => $file,
                'created_at' => $task->created_at,
                'duration' => $duration,
                'percent' => $percent,
            ];
        });

    $taskCount = $recentTasks->count();
    $processingCount = $recentTasks->where('status', 1)->count();
@endphp

{{-- Badges bar — centered, looks like old Central header icons --}}
<div style="display: flex; align-items: center; gap: 16px; padding: 6px 0;">

    {{-- Task Queue Badge (green badge like old Central) --}}
    <div style="position: relative; display: inline-block;" id="task-badge-wrapper">
        <button onclick="document.getElementById('task-dropdown').classList.toggle('hidden'); document.getElementById('notif-dropdown').classList.add('hidden');"
                style="position: relative; background: none; border: none; cursor: pointer; padding: 6px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
            @if($taskCount > 0)
                <span style="position: absolute; top: -2px; right: -4px; background: #5cb85c; color: white; font-size: 10px; font-weight: 700; border-radius: 50%; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; line-height: 1;">{{ $taskCount }}</span>
            @endif
        </button>

        {{-- Tasks Dropdown — opens to the LEFT of the badge --}}
        <div id="task-dropdown" class="hidden" style="position: absolute; top: 100%; left: 0; margin-top: 6px; width: 420px; max-height: 520px; overflow-y: auto; background: white; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); z-index: 9999; padding: 0;">
            @forelse($recentTasks as $task)
                <div style="display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #f0f0f0;">
                    {{-- Circular progress --}}
                    <div style="flex-shrink: 0; position: relative; width: 50px; height: 50px;">
                        @php
                            $color = $task->status === 2 ? '#5bc0de' : ($task->status === 1 ? '#f0ad4e' : ($task->status === 3 ? '#d9534f' : '#ccc'));
                            $dashoffset = 157 - (157 * $task->percent / 100);
                        @endphp
                        <svg viewBox="0 0 56 56" style="width: 50px; height: 50px; transform: rotate(-90deg);">
                            <circle cx="28" cy="28" r="25" fill="none" stroke="#e8e8e8" stroke-width="3"/>
                            <circle cx="28" cy="28" r="25" fill="none" stroke="{{ $color }}" stroke-width="3"
                                    stroke-dasharray="157" stroke-dashoffset="{{ $dashoffset }}" stroke-linecap="round"/>
                        </svg>
                        <span style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: {{ $color }};">
                            {{ $task->percent }}%
                        </span>
                    </div>
                    {{-- Info --}}
                    <div style="flex: 1; min-width: 0; font-size: 12px; color: #666;">
                        <p style="font-weight: 700; color: #333; margin: 0;">{{ $task->title }} [{{ $task->user }}]</p>
                        @if($task->file)
                            <p style="margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">File: {{ $task->file }}</p>
                        @endif
                        <p style="margin: 2px 0;">Started at {{ $task->created_at }}</p>
                        @if($task->duration)
                            <p style="margin: 2px 0;">Duration: {{ $task->duration }}</p>
                        @endif
                    </div>
                </div>
            @empty
                <p style="text-align: center; padding: 20px; color: #999; font-size: 13px;">No recent tasks</p>
            @endforelse
        </div>
    </div>

    {{-- Email icon (just visual, like old Central) --}}
    <div style="padding: 6px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
    </div>

    {{-- Notifications Badge (orange like old Central bell) --}}
    <div style="position: relative; display: inline-block;" id="notif-badge-wrapper">
        <button onclick="document.getElementById('notif-dropdown').classList.toggle('hidden'); document.getElementById('task-dropdown').classList.add('hidden');"
                style="position: relative; background: none; border: none; cursor: pointer; padding: 6px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            @if($taskCount > 0)
                <span style="position: absolute; top: -2px; right: -4px; background: #f0ad4e; color: white; font-size: 10px; font-weight: 700; border-radius: 50%; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; line-height: 1;">{{ $taskCount }}</span>
            @endif
        </button>

        {{-- Notifications Dropdown --}}
        <div id="notif-dropdown" class="hidden" style="position: absolute; top: 100%; left: 0; margin-top: 6px; width: 380px; max-height: 420px; overflow-y: auto; background: white; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); z-index: 9999; padding: 10px;">
            <p style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 8px;">Notifications</p>
            @foreach($recentTasks->where('status', 2)->take(10) as $task)
                <div style="padding: 8px 10px; margin-bottom: 6px; background: #f0fff0; border-radius: 4px; font-size: 12px;">
                    <p style="color: #5cb85c; font-weight: 600; margin: 0;">{{ $task->created_at }}</p>
                    <p style="color: #555; margin: 4px 0 0;">{{ str_replace('UPDATE PRODUCT STOCKS & PRICES', 'Product stocks & prices updated.', str_replace('IMPORT SUPPLIER PARTS DATA', 'Supplier parts successfully imported.', $task->title)) }} Scheduled by user {{ $task->user }}</p>
                </div>
            @endforeach
            @if($recentTasks->where('status', 2)->isEmpty())
                <p style="text-align: center; color: #999; padding: 12px;">No notifications</p>
            @endif
        </div>
    </div>
</div>

{{-- Close dropdowns on outside click --}}
<script>
document.addEventListener('click', function(e) {
    if (!document.getElementById('task-badge-wrapper')?.contains(e.target)) {
        document.getElementById('task-dropdown')?.classList.add('hidden');
    }
    if (!document.getElementById('notif-badge-wrapper')?.contains(e.target)) {
        document.getElementById('notif-dropdown')?.classList.add('hidden');
    }
});
</script>