@extends('employee.layouts.app')
@section('title', 'My Dashboard')
@section('page-title', 'My Dashboard')

@section('content')

@if(($panelUnreadNotificationCount ?? 0) > 0)
<div class="mb-6 rounded-xl border border-amber-200 bg-amber-50 px-5 py-4 shadow-sm">
    <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
            <p class="text-sm font-semibold text-amber-900">You have {{ $panelUnreadNotificationCount }} unread notification{{ $panelUnreadNotificationCount > 1 ? 's' : '' }}</p>
            <p class="mt-1 text-sm text-amber-700">Check lead assignments, blog feedback, and new updates from the team.</p>
        </div>
        <a href="{{ route('notifications.index') }}" class="inline-flex items-center justify-center rounded-full bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-black">
            View All Notifications
        </a>
    </div>
</div>
@endif

<div class="mb-6 rounded-xl bg-gradient-to-r from-gray-800 to-gray-700 px-6 py-5 text-white shadow">
    <h2 class="text-xl font-bold">Hello, {{ auth()->user()->name }}</h2>
    <p class="mt-1 text-sm text-gray-300">Here's an overview of your assigned leads and recent updates.</p>
</div>

<div class="mb-8 grid grid-cols-2 gap-4 xl:grid-cols-4">
    @php
        $statCards = [
            ['Total Assigned', $stats['total'], 'bg-blue-50 text-blue-700 border-blue-100'],
            ['New', $stats['new'], 'bg-indigo-50 text-indigo-700 border-indigo-100'],
            ['Contacted', $stats['contacted'], 'bg-yellow-50 text-yellow-700 border-yellow-100'],
            ['Enrolled', $stats['enrolled'], 'bg-green-50 text-green-700 border-green-100'],
        ];
    @endphp
    @foreach($statCards as [$label, $val, $classes])
        <div class="rounded-xl border bg-white p-5 text-center {{ $classes }}">
            <p class="text-3xl font-black">{{ $val }}</p>
            <p class="mt-1 text-xs font-semibold uppercase tracking-wide">{{ $label }}</p>
        </div>
    @endforeach
</div>

<div class="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
    <div class="overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm">
        <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
            <h3 class="font-bold text-gray-800">Recent Leads</h3>
            <a href="{{ route('employee.leads.index') }}" class="text-sm text-blue-600 hover:underline">View all</a>
        </div>

        @if($recentLeads->isEmpty())
            <div class="py-12 text-center text-sm text-gray-400">No leads assigned to you yet.</div>
        @else
            <table class="min-w-full divide-y divide-gray-100">
                <thead class="bg-gray-50 text-xs uppercase tracking-wide text-gray-500">
                    <tr>
                        <th class="px-5 py-3 text-left">Contact</th>
                        <th class="hidden px-5 py-3 text-left md:table-cell">Country</th>
                        <th class="px-5 py-3 text-left">Status</th>
                        <th class="px-5 py-3 text-right">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($recentLeads as $lead)
                        <tr class="transition hover:bg-gray-50">
                            <td class="px-5 py-3">
                                <p class="text-sm font-semibold text-gray-800">{{ $lead->name ?: '—' }}</p>
                                <p class="text-xs text-gray-500">{{ $lead->phone }}</p>
                            </td>
                            <td class="hidden px-5 py-3 text-sm text-gray-500 md:table-cell">{{ $lead->country_name ?: '—' }}</td>
                            <td class="px-5 py-3">
                                <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-semibold {{ $lead->statusBadge() }}">
                                    {{ $lead->statusLabel() }}
                                </span>
                            </td>
                            <td class="px-5 py-3 text-right">
                                <a href="{{ route('employee.leads.show', $lead) }}" class="text-sm font-medium text-blue-600 hover:underline">View</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>

    <div class="overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm">
        <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
            <div>
                <h3 class="font-bold text-gray-800">Recent Notifications</h3>
                <p class="mt-1 text-xs text-gray-400">Assignments, blog review updates, and admin responses.</p>
            </div>
            <a href="{{ route('notifications.index') }}" class="text-sm text-blue-600 hover:underline">View all</a>
        </div>

        @if($recentNotifications->isEmpty())
            <div class="py-12 text-center text-sm text-gray-400">No notifications yet.</div>
        @else
            <div class="divide-y divide-gray-100">
                @foreach($recentNotifications as $notification)
                    <div class="px-5 py-4 {{ $notification->read_at ? 'bg-white' : 'bg-blue-50/40' }}">
                        <div class="flex items-start gap-3">
                            <span class="mt-1 inline-flex h-2.5 w-2.5 rounded-full {{ $notification->read_at ? 'bg-gray-300' : 'bg-blue-500 shadow-[0_0_0_6px_rgba(59,130,246,0.14)]' }}"></span>
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-gray-800">{{ $notification->title }}</p>
                                <p class="mt-1 text-sm text-gray-600">{{ $notification->message }}</p>
                                <p class="mt-2 text-xs text-gray-400">{{ $notification->created_at->diffForHumans() }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

@endsection