<x-app-layout>
    <x-slot name="header">
        {{ __('Dashboard') }}
    </x-slot>

    <div class="p-6 space-y-6">
        <div class="grid grid-cols-12 gap-6">
            <section class="col-span-12 lg:col-span-12 space-y-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 min-h-[220px]">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">To Do List</h3>
                        <p class="text-sm text-gray-600">Task widgets and personal workflow cards will appear here.</p>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 min-h-[220px]">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">User Specific Dashboard</h3>
                        <p class="text-sm text-gray-600">Role-specific KPIs and quick actions will be displayed here.</p>
                    </div>
                </div>

                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 min-h-[180px]">
                    <h3 class="text-lg font-semibold text-gray-900 mb-3">Operational Overview</h3>
                    <p class="text-sm text-gray-600">Cross-module snapshots and alerts will be added in the next sprint.</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 lg:col-span-1 min-h-[160px]">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Calendar</h3>
                        <p class="text-sm text-gray-600">Schedule and reminder widgets placeholder.</p>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 lg:col-span-2 min-h-[160px]">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Current Session Context</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-y-2 text-sm text-gray-700">
                            <p><span class="font-medium text-gray-900">User:</span> {{ auth()->user()->name }}</p>
                            <p><span class="font-medium text-gray-900">Dealer:</span> {{ optional(auth()->user()->dealer)->name ?? 'N/A' }}</p>
                            <p><span class="font-medium text-gray-900">Department:</span> {{ optional(auth()->user()->department)->name ?? 'N/A' }}</p>
                            <p><span class="font-medium text-gray-900">Roles:</span> {{ auth()->user()->getRoleNames()->join(', ') }}</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</x-app-layout>
